Solved

Google map API marker information on-click

Posted on 2016-08-16
5
17 Views
Last Modified: 2016-08-21
Hello everyone, I need help integrating the pop info box ( Marker click) into my map page. I know that I need something like:
var infowindow = new google.maps.InfoWindow({
            content: "Test me"
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

Open in new window



And my map page code is:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" > 
     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=Secret_code_here=false">
     </script>
<body onload="initialize()">

          <div id="mapArea" style="width: 500px; height: 500px;">
          </div> 
          <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</body>
</html>
</asp:Content>

Open in new window


How do I integrate the two codes to play nice with each other? As you can tell, I have 0 experience in this :-)

Thank you a bunch.
0
Comment
Question by:Cobra967
  • 3
  • 2
5 Comments
 
LVL 13

Assisted Solution

by:Abhijeet Rananaware
Abhijeet Rananaware earned 500 total points
ID: 41758652
Here you go...

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" > 
     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=Secret_code_here=false">
     </script>
<body onload="initialize()">

          <div id="mapArea" style="width: 500px; height: 500px;">
          </div> 
          <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</body>
<script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

      function initialize() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('mapArea'), {
          zoom: 4,
          center: uluru
        });
       
        var infowindow = new google.maps.InfoWindow({
            content: "Test me"
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>
</html>
</asp:Content>

Open in new window

1
 

Author Comment

by:Cobra967
ID: 41758670
Thank you Abhijeet, your example works by it self but not by using my data. Literal1 actually populate all my points on google map. My data come from a SQL Connection from I table that has just 3 fields: Lat, Lng and RecordID.  The main goal is to show the recordID when clicking on the map pushpin. Probably it will help if I include the VB code associated with this page:  

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Public Class MyMap
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim markers As String = ""
        markers = GetMarkers()
        Literal1.Text = "<script type='text/javascript'>" +
     "function initialize() {" +
     "var mapOptions = {" +
     "center: new google.maps.LatLng(35.372278, -80.633568)," +
     "zoom: 9," +
     "mapTypeId : google.maps.MapTypeId.ROADMAP" +
     "};" +
     "var myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);" +
     markers +
     "}" +
     "</script>"


    End Sub

    Protected Function GetMarkers() As String
        Dim markers As String = ""

        Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("DefaultConnection").ConnectionString)
            Dim cmd As SqlCommand = New SqlCommand("SELECT Lat, Lng, RecordID FROM MyData", con)
            con.Open()
            Dim reader As SqlDataReader = cmd.ExecuteReader()
            Dim i As Integer = 0
            While reader.Read()
                i = i + 1
                markers = markers + "var marker" + i.ToString() + "= new google.maps.Marker({" +
               "position: new google.maps.LatLng( " + reader("Lat").ToString() + ", " +
               reader("Lng").ToString() + ")," +
               "Label:'" + reader("RecordID").ToString() + "', " +
               "map: myMap," +
               "title:'" + reader("RecordID").ToString() + "'});"

            End While
            con.Close()
        End Using
        Return markers
    End Function

End Class

Open in new window


The result is this:
MyMap.jpg
I really appreciate if you are able to help me out with this.
0
 

Accepted Solution

by:
Cobra967 earned 0 total points
ID: 41758745
0
 
LVL 13

Expert Comment

by:Abhijeet Rananaware
ID: 41758950
Hey,

Glad that you got your answer. I was just giving you the example how to put everything in a place.

Regards,
Abhijit
0
 

Author Closing Comment

by:Cobra967
ID: 41764182
I found a better code elsewhere.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
populate dynamic drop down from a csv 3 39
javascript email link with image 2 19
JavaScript error 1 34
Hidden Field Value 10 34
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now