Link to home
Start Free TrialLog in
Avatar of Cobra967
Cobra967Flag for United States of America

asked on

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 () {
  , marker);

Open in new window

And my map page code is:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <!DOCTYPE html>
<html xmlns="" > 
     <script type="text/javascript"
<body onload="initialize()">

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

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.
Avatar of Abhijeet Rananaware
Abhijeet Rananaware
Flag of India image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Cobra967


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 +
     "}" +

    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)
            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
        End Using
        Return markers
    End Function

End Class

Open in new window

The result is this:
User generated image
I really appreciate if you are able to help me out with this.
Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

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

I found a better code elsewhere.