Troubleshoot my code for clustering markers on a Google map

Question

Troubleshoot my code for clustering markers on a Google map

I'm currently working on a piece of code to generate a Google map that contains 3 hidden points within one marker. The idea is that when the main marker is clicked, these points will either merge into one or expand into 3 separate markers. However, I'm facing an issue where the map is not showing up. Can someone please take a look at my code and help me identify any potential problems?

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>favorite cities</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      (function() {
        window.onload = function(){
          var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.99, -93.77),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map'), options);
          
          var mgr = new MarkerManager(map);
          var A = new google.maps.Marker({
            position: new google.maps.LatLng(37.99, -93.77),
            icon: 'img/cluster.png'
          });
          google.maps.event.addListener(A, 'click', function() {
            map.setZoom(7);
            map.setCenter(Kloof.getPosition());
          });
          
          var Cities = [A];
          var Schools = [
            //School1
       new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
                                    //School2
       new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
                                    //School3
       new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
                                    ];
                                    google.maps.event.addListener(mgr, 'loaded', function() {
                                    agr.addMarkers(Cities, 11, 6);
                                    agr.addMarkers(Schools, 6);
                                    agr.refresh
                                   });
                                   };
                                   })();
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

javascript google-maps google-maps-api-3 google-maps-markers markerclusterer

Answer 1

Answer №1

Modify:

var map = new google.maps.Map(document.getElementById('map-canvas'), options);

To:

var map = new google.maps.Map(document.getElementById('new-map-canvas'), options);

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>popular destinations</title>
    <style>
      html, body, #new-map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      (function() {
        window.onload = function(){
          var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.99, -93.77),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('new-map-canvas'), options);
          
          var mgr = new MarkerManager(map);
          var A = new google.maps.Marker({
            position: new google.maps.LatLng(37.99, -93.77),
            icon: 'img/cluster.png'
          });
          google.maps.event.addListener(A, 'click', function() {
            map.setZoom(7);
            map.setCenter(Kloof.getPosition());
          });
          
          var Cities = [A];
          var Schools = [
            //SChool1
       new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
                                    //School2
       new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
                                    //School3
       new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
                                    ];
                                    google.maps.event.addListener(mgr, 'loaded', function() {
                                    agr.addMarkers(Cities, 11, 6);
                                    agr.addMarkers(Schools, 6);
                                    agr.refresh();
                                   });
                                   };
                                   })();
    </script>
  </head>
  <body>
    <div id="new-map-canvas"></div>
  </body>
</html>

Answer 2

Modify:

var map = new google.maps.Map(document.getElementById('map-canvas'), options);

To:

var map = new google.maps.Map(document.getElementById('new-map-canvas'), options);

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>popular destinations</title>
    <style>
      html, body, #new-map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      (function() {
        window.onload = function(){
          var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.99, -93.77),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('new-map-canvas'), options);
          
          var mgr = new MarkerManager(map);
          var A = new google.maps.Marker({
            position: new google.maps.LatLng(37.99, -93.77),
            icon: 'img/cluster.png'
          });
          google.maps.event.addListener(A, 'click', function() {
            map.setZoom(7);
            map.setCenter(Kloof.getPosition());
          });
          
          var Cities = [A];
          var Schools = [
            //SChool1
       new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
                                    //School2
       new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
                                    //School3
       new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
                                    ];
                                    google.maps.event.addListener(mgr, 'loaded', function() {
                                    agr.addMarkers(Cities, 11, 6);
                                    agr.addMarkers(Schools, 6);
                                    agr.refresh();
                                   });
                                   };
                                   })();
    </script>
  </head>
  <body>
    <div id="new-map-canvas"></div>
  </body>
</html>

Answer 3

Answer №2

After some modifications, the code now looks like this:

<
    var schoolArray = []; //Keeping track of POINTS in a global array
    var SchoolPoints = [[-29.788911, 30.852721, 'Thomas More College'], //Global array storing MARKERS
                [-29.781297, 30.838465, 'Kloof Senior Primary School'],
                [-29.827008, 30.881706, 'Pinetown Boys HighSchool']];  

    function initialize() { //Setting up the google map and its appearance on my dashboard
    var myOptions = {
        zoom: 9,
        center: new google.maps.LatLng(-29.807762, 30.854261),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var mcOptions = { //Determining tile grid size for clustering schools points
        gridSize: 25,
        maxZoom: 20
    };
  var mc = new MarkerClusterer(map, [], mcOptions); //Creating blue initial cluster on the map

  google.maps.event.addListener(map, 'click', function() { //Map zooms in and displays 3 schools with separate markers upon click
        infowindow.close();
    });

    // Adding markers to the map and sorting them into clusters
  for(var i=0; i<SchoolPoints.length; i++){ //Placing markers on the map based on points array elements
         createMarker(new google.maps.LatLng(SchoolPoints[i][0], SchoolPoints[i][1]), SchoolPoints[i][2]);
    }
    
  mc.addMarkers(schoolArray , true); //Clustering markers together in the blue symbol
}

  var infowindow = new google.maps.InfoWindow({ //Defining info window size for school points display
    size: new google.maps.Size(500, 250)
});

  function createMarker(latlng, html) { //Creating individual markers
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: '',       
    });

  marker.setAnimation(google.maps.Animation.DROP); //Adding drop animation for marker aesthetics
    
  google.maps.event.addListener(marker, 'click', function() { //Displaying info windows upon clicking markers
    infowindow.setContent(contentString); 
        infowindow.open(map, marker);
    });
    
    schoolArray.push(marker); 
}

window.onload = initialize;

Answer 4

After some modifications, the code now looks like this:

<
    var schoolArray = []; //Keeping track of POINTS in a global array
    var SchoolPoints = [[-29.788911, 30.852721, 'Thomas More College'], //Global array storing MARKERS
                [-29.781297, 30.838465, 'Kloof Senior Primary School'],
                [-29.827008, 30.881706, 'Pinetown Boys HighSchool']];  

    function initialize() { //Setting up the google map and its appearance on my dashboard
    var myOptions = {
        zoom: 9,
        center: new google.maps.LatLng(-29.807762, 30.854261),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var mcOptions = { //Determining tile grid size for clustering schools points
        gridSize: 25,
        maxZoom: 20
    };
  var mc = new MarkerClusterer(map, [], mcOptions); //Creating blue initial cluster on the map

  google.maps.event.addListener(map, 'click', function() { //Map zooms in and displays 3 schools with separate markers upon click
        infowindow.close();
    });

    // Adding markers to the map and sorting them into clusters
  for(var i=0; i<SchoolPoints.length; i++){ //Placing markers on the map based on points array elements
         createMarker(new google.maps.LatLng(SchoolPoints[i][0], SchoolPoints[i][1]), SchoolPoints[i][2]);
    }
    
  mc.addMarkers(schoolArray , true); //Clustering markers together in the blue symbol
}

  var infowindow = new google.maps.InfoWindow({ //Defining info window size for school points display
    size: new google.maps.Size(500, 250)
});

  function createMarker(latlng, html) { //Creating individual markers
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: '',       
    });

  marker.setAnimation(google.maps.Animation.DROP); //Adding drop animation for marker aesthetics
    
  google.maps.event.addListener(marker, 'click', function() { //Displaying info windows upon clicking markers
    infowindow.setContent(contentString); 
        infowindow.open(map, marker);
    });
    
    schoolArray.push(marker); 
}

window.onload = initialize;

Troubleshoot my code for clustering markers on a Google map

Answer №1

Answer №2

Similar questions

The ƒ character doesn't seem to be a match for the JavaScript regex

Preserving data in input fields even after a page is refreshed

Is there a way to alter the format of a URL?

Utilizing a single variable across different JavaScript scripts - where one script includes a .ready function while the other does not

Unfortunately, I am unable to transmit a cookie using the res.cookie method in Express

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

Change the text field's border color if the field is not empty

When an accordion is clicked, the content is dynamically loaded within the accordion on the page using PHP, jQuery, and AJAX

Observables in Knockout.js vanish after being bound

Redis Recursion: The callstack has reached its maximum size limit

Navigate through each of the pictures within the folder and encode them into base64

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

The setInterval function will run just one time when triggered by an onclick event

Is there a way to locate a null string within this data arrangement?

Loop through the JSON data to obtain distinct values for certain indices

The simplest method to make HTML elements inaccessible to the Simple HTML Dom Parser in PHP

Ways to dynamically assign a name to a div using AngularJS

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Sending Data from jQueryUI Dialog to PHP using AJAX

Ways to stop a JavaScript function from running during page loading