MarkerClusterer and GoogleMaps ?

Hello, I am having issues integrating MarkerClusterer with my existing/working GoogleMaps code project.  I am not quite sure how to add markers to the cluster using my GetPins function.   Hoping someone can help me out.

https://github.com/googlemaps/js-marker-clusterer

my project:  http://www.gcp21.org/GMap.aspx

aspx1.JPGaspx.JPG
Imports System.Data.SqlClient

Partial Class GMap
    Inherits System.Web.UI.Page

    Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        
        If NOT Page.IsPostBack Then
            Dim pins = ""
            Dim sSql As String = " LID <> 0"
            pins = GetPins(sSql)
            Literal1.Text = "<script type='text/javascript'>" +
                        "function initialize() {" +
                        "var mapOptions = {" +
                        "center: new google.maps.LatLng(18.811477, 16.993726)," +
                        "zoom: 2," +
                        "mapTypeId : google.maps.MapTypeId.ROADMAP" +
                        "};" +
                        "var map = new google.maps.Map(document.getElementById('mapArea'), mapOptions);" +
                        pins + 
                        "}" +
                        "</script>"
        
            Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("GCP21DBConnectionString").ConnectionString)
                con.Open()            
                Dim cmd = New SqlCommand("SELECT Expertise FROM GMLocs ORDER BY Expertise", con)
                Dim reader As SqlDataReader = cmd.ExecuteReader()
                While reader.Read()
                    ddlExpertise.Items.Add(reader("Expertise").ToString())
                End While
                reader.Close()
                Dim cmd2 = New SqlCommand("SELECT Country FROM GMLocs ORDER BY Country", con)
                Dim reader2 As SqlDataReader = cmd2.ExecuteReader()
                While reader2.Read()
                    ddlCountry.Items.Add(reader2("Country").ToString())
                End While
                reader2.Close()
                Dim cmd3 = New SqlCommand("SELECT LocContact FROM GMLocs ORDER BY LocContact", con)
                Dim reader3 As SqlDataReader = cmd3.ExecuteReader()
                While reader3.Read()
                    ddlFullName.Items.Add(reader3("LocContact").ToString())
                End While
                reader3.Close()
            End Using
        End If

    End Sub
    

    Private Shared Function GetPins(sSql As String) As String
        
        Dim pins As String = ""
        Dim markers As String = ""
        Dim markerCluster As String = ""
        Dim infowindows As String = ""
        Dim listeners As String = ""
        Const target As String = "_blank"
        
        Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("GCP21DBConnectionString").ConnectionString)
            Dim cmd = New SqlCommand("SELECT Lat, Lon, City, Country, LocName, LocContact, LocURL, Expertise FROM GMLocs WHERE" & sSQL, con)
            'cmd.Parameters.AddWithValue("SQL", sSQL)
            con.Open()
            Dim reader As SqlDataReader = cmd.ExecuteReader()
            Dim i = 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("Lon").ToString() + ")," +
                          "map: map});"
                
                infowindows = infowindows + "var infowindow" + i.ToString() + "= new google.maps.InfoWindow({" +
                         "content: '" + "<strong>" + reader("LocName").ToString() + "</strong><br />" + reader("LocContact").ToString() + "<br />" + reader("Expertise").ToString() + "<br />" +
                          reader("City").ToString() + ", " + reader("Country").ToString() + "<br />" + "<a href=" + reader("LocURL").ToString() + " target=" + target + ">more info</a>" + "'});"

                listeners = listeners + "google.maps.event.addListener(marker" + i.ToString() + ", 'click', function () {" +
                          "infowindow" + i.ToString() + ".open(map, marker" + i.ToString() + ");" + "});"
            End While
                markerCluster = "var markerCluster = new MarkerClusterer(map, markers);"
        End Using
        pins = markers & infowindows & listeners
        'pins = markerCluster & infowindows & listeners
        Return pins
        
    End Function

Open in new window


 

TIA,
Andrew
AhelblingAsked:
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.

kblauCommented:
@{
    Layout = null;
    //The fake KEY used on this page seems to work only in IE!!!
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        body {
            margin: 0;
            padding: 10px 20px 20px;
            font-family: Arial;
            font-size: 16px;
        }

        #map-container {
            padding: 6px;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc #ccc #999 #ccc;
            -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
            -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
            box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
            width: 600px;
        }

        #map {
            width: 600px;
            height: 400px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="data.json"></script>
    <script src="~/Scripts/markerclusterer_compiled.js"></script>
</head>
<body>
    <div id="map"></div>
    <input type="button" id="btnGet" value="Get" onclick="initialize()" />
    <script>
        function initialize() {
            var center = new google.maps.LatLng(37.4419, -122.1419);

            /*  */
            var homeLat = 51.476706;
            var homeLng = 0;

            /*  */

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var markers = [];
            for (var i = 0; i < 100; i++) {
                //var dataPhoto = data.photos[i];
                //var latLng = new google.maps.LatLng(dataPhoto.latitude,
                //    dataPhoto.longitude);
               
                var latLng = new google.maps.LatLng(homeLat, homeLng + i);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            var markerCluster = new MarkerClusterer(map, markers);
        }
        //google.maps.event.addDomListener(window, 'load', initialize);
    </script>
   </body>
</html>

Open in new window

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
AhelblingAuthor Commented:
I will give that a try - thank you!
AhelblingAuthor Commented:
I am just getting back to this problem.  Sorry.
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.