Google map API marker information on-click

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.
Cobra967Asked:
Who is Participating?
 
Cobra967Connect With a Mentor Author Commented:
0
 
Abhijeet RananawareConnect With a Mentor Web & Mobile DeveloperCommented:
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
 
Cobra967Author Commented:
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
 
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Hey,

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

Regards,
Abhijit
0
 
Cobra967Author Commented:
I found a better code elsewhere.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.