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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Abhijeet RananawareWeb & 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

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.
Cobra967Author Commented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Cobra967Author Commented:
I found a better code elsewhere.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.