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 () {
            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.

SOLUTION

Abhijeet Rananaware

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Cobra967

ASKER

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:

I really appreciate if you are able to help me out with this.

ASKER CERTIFIED SOLUTION

Cobra967

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Abhijeet Rananaware

Hey,

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

Regards,
Abhijit

Cobra967

ASKER

I found a better code elsewhere.