标记聚类，Google Maps API

Question

  <h1>Explore Ireland with me!</h1>
  <div id="map"></div>
  <script>
    function initMap(){
      // map options
      var options = {
        zoom:7,
        center:{lat:53.3938131, lng:-7.858913}
var map = new google.maps.Map(document.getElementById('map'),options);
      // Add a marker clusterer to manage the markers.

      //Add marker
      var markers = [

        //Dublin
        {
          coords:{lat:53.338741, lng:-6.261563},
          iconImage:'assets/img/places/stparkdublin.png',
          content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
        },
        {
          coords:{lat:53.3755012,lng:-6.2735677},
          iconImage:'assets/img/places/botanic garden.png',
          content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
        },
        {
          coords:{lat:53.355998576, lng:-6.32166538},
          iconImage:'assets/img/places/stparkdublin.png',////////////////////add picture
          content:'<h1>Phoenix Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://phoenixpark.ie/</a>'
        },
        {
          coords:{lat:53.460259, lng:-6.219985},
          iconImage:'assets/img/places/swordscastle.png',
          content:'<h1>Swords Castle</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://swordscastle.events/</a>'
        },
        {
          coords:{lat:53.37923, lng:-6.07201},
          iconImage:'assets/img/places/Howth.png',
          content:'<h1>Howth</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.visithowth.ie/</a>'
        },
        {
          coords:{lat:55.1364, lng:-7.456},
          iconImage:'assets/img/places/buncrana1.png',
          content:'<h1>Buncrana</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Buncrana</a>'
        },

        {
          coords:{lat:53.152999388, lng:-6.1499994},
          iconImage:'assets/img/places/sugarloaf_icon.png',
          content:'<h1>Great sugar loaf</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/the-sugarloaf-trail/</a>'
        },
        {
          coords:{lat:52.0058, lng:-9.5562},
          iconImage:'assets/img/places/killarney.png',
          content:'<h1>Killarney National Park </h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.killarneynationalpark.ie/</a>'
        },
        {
          coords:{lat:51.942662896, lng:-9.917162998},
          iconImage:'assets/img/places/clifs.png',
          content:'<h1>Ring of Kerry</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://ringofkerrytourism.com/</a>'
        },
        {
          coords:{lat:52.679, lng:-7.814},
          iconImage:'assets/img/places/clifs.png',//add picture!!!!!!!!!!!!!!!
          content:'<h1>Thurles</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.tipperary.com/thurles</a>'
        },
        {
          coords:{lat:52.348, lng:-6.517},
          iconImage:'assets/img/places/wexford museum.png',
          content:'<h1>Irish National Heritage Park</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.irishheritage.ie/</a>'
        },
        {
          coords:{lat:53.018, lng:-6.398},
          iconImage:'assets/img/places/wicklow.png',
          content:'<h1> Wicklow Mountains National Park</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.wicklowmountainsnationalpark.ie/</a>'
        },
        {
          coords:{lat:53.011299, lng:   -6.326156},
          iconImage:'assets/img/places/glendalough.png',
          content:'<h1> Glendalough </h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.glendalough.ie/</a>'
        },
        {
          coords:{lat:53.1876492494, lng:-6.083832998},
          iconImage:'assets/img/places/Bray.png',
          content:'<h1> Bray</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.bray.ie/</a>'
        },
        {
          coords:{lat:53.144, lng: -6.072},
          iconImage:'assets/img/places/greystones.png',
          content:'<h1>Greystones</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/greystones/</a>'
        },
        {
          coords:{lat:52.518664592, lng:-7.887329784},
          iconImage:'assets/img/places/Cashel.png',
          content:'<h1>Rock of Cashel</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cashel.ie/</a>'
        },
        {
          coords:{lat:52.6477, lng: -7.2561},
          iconImage:'assets/img/places/kilkenny.png',
          content:'<h1>Killenny</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://visitkilkenny.ie/</a>'
        },
        //cork
        {
          coords:{lat:51.902694, lng:-8.4767},
          iconImage:'assets/img/places/butterCork.png',
          content:'<h1>Museum of Butter</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://thebuttermuseum.com/</a>'
        },
        {
          coords:{lat:51.89953, lng:-8.499022},
          iconImage:'assets/img/places/prisoncork.png',
          content:'<h1>Cork City Gaol</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://corkcitygaol.com/</a>'
        },

        {
          coords:{lat:53.4513204, lng:-6.140871},
          iconImage:'assets/img/places/malahideB.png',
          content:'<h1>Malahide</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.malahide.ie/</a>'
        },

        {
          coords:{lat:53.2839577, lng:-9.0837658},
          iconImage:'assets/img/places/galway.png',
          content:'<h1>Galway</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.galwaytourism.ie/</a>'
        },
        {
          coords:{lat:53.470580, lng:-6.122405},
          iconImage:'assets/img/places/galway.png',
          content:'<h1>Donabate Beach</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Donabate</a>'
        },
        {
          coords:{lat:52.9713299, lng:-9.4300415},
          iconImage:'assets/img/places/clifsofmoher.png',
          content:'<h1>Donabate Beach</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.cliffsofmoher.ie/</a>'
        },
        {
          coords:{lat:51.8960528, lng:-8.4980693},
          iconImage:'assets/img/places/Cork.png',
          content:'<h1>Cork</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://purecork.ie/</a>'
        },
        {
          coords:{lat:53.3667776, lng:-6.5064198},
          iconImage:'assets/img/places/Leixlip.png',
          content:'<h1>Leixlip</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://pl.wikipedia.org/wiki/Leixlip</a>'
        },
        {
          coords:{lat:53.1654628, lng:-6.125499},
          iconImage:'assets/img/places/littlesugarloaf.png',
          content:'<h1>Little Sugar Loaf</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.greystonesguide.ie/little-sugar-loafs-big-day/</a>'
        },
        {
          coords:{lat:53.5474019, lng:-6.0933048},
          iconImage:'assets/img/places/rockabill view.png',
          content:'<h1>Rockabill View</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>http://www.skerriesseatours.ie/trips.html</a>'
        },
        {
          coords:{lat:52.3337499, lng:-6.4906996},
          iconImage:'assets/img/places/wexford.png',
          content:'<h1>Wexford</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.visitwexford.ie/</a>'
        },
      ];

      // Loop through markers
      for(var i = 0; i < markers.length; i++){
        addMarker(markers[i]);

      }




      //Add MArker function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,

        });

        if(props.iconImage){
          marker.setIcon(props.iconImage);
        }

        //Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });
          marker.addListener('click',function(){
            infoWindow.open(map,marker);
          });
        }
      }
      var markerCluster = new MarkerClusterer(map, markers,
          {imagePath: });
    }
  </script>

I want to add marker clustering to my code. I have few custom markers, and info windows. But I don't know how to implement marker clustering. Everything works fine with my code. But For a better look I want to add this option. I check this web to see how can I add them to my code https://developers.google.com/maps/documentation/javascript/marker-clustering . I put the marker clustering file onto my website and added the link into my code, but now I struggle where to put var markerClusterer = new MarkerClusterer(...) so it works properly.

Answer 1

You have obvious syntax errors in the posted code.

1. Uncaught SyntaxError: Unexpected token var on these lines:

// map options
var options = {
  zoom:7,
  center:{lat:53.3938131, lng:-7.858913}
var map = new google.maps.Map(document.getElementById('map'),options);

should be:

// map options
var options = {
  zoom:7,
  center:{lat:53.3938131, lng:-7.858913}
} // <===================================================================== missing "}"
var map = new google.maps.Map(document.getElementById('map'),options);

2. Uncaught SyntaxError: Unexpected token } on this line:

  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: });

either remove the imagePath: or add a value for it:

var markerCluster = new MarkerClusterer(map, markers, 
  {
    imagePath:
    'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

3. The markers array passed into the MarkerClusterer must be an array of google.maps.Marker objects, create one.

// Loop through markers
var gmarkers = [];
for(var i = 0; i < markers.length; i++){
  gmarkers.push(addMarker(markers[i]));
}

//Add MArker function
function addMarker(props){
  var marker = new google.maps.Marker({
    position:props.coords,
    map:map,
  });
  if(props.iconImage){
    marker.setIcon(props.iconImage);
  }
  //Check content
  if(props.content){
    var infoWindow = new google.maps.InfoWindow({
      content:props.content
    });
    marker.addListener('click',function(){
      infoWindow.open(map,marker);
    });
  }
  return marker;
}
var markerCluster = new MarkerClusterer(map, gmarkers, {
  imagePath:
  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

proof of concept/working fiddle

code snippet:

 html, body, #map { height: 100%; margin: 0; padding: 0; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <div id="map"></div> <script> function initMap() { // map options var options = { zoom: 7, center: { lat: 53.3938131, lng: -7.858913 } } var map = new google.maps.Map(document.getElementById('map'), options); // Add a marker clusterer to manage the markers. //Add marker var markers = [ //Dublin { coords: { lat: 53.338741, lng: -6.261563 }, iconImage: 'assets/img/places/stparkdublin.png', content: '<h1>St Stephen's Green</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>' }, { coords: { lat: 53.3755012, lng: -6.2735677 }, iconImage: 'assets/img/places/botanic garden.png', content: '<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>' }, { coords: { lat: 53.355998576, lng: -6.32166538 }, iconImage: 'assets/img/places/stparkdublin.png', ////////////////////add picture content: '<h1>Phoenix Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://phoenixpark.ie/</a>' }, { coords: { lat: 53.460259, lng: -6.219985 }, iconImage: 'assets/img/places/swordscastle.png', content: '<h1>Swords Castle</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://swordscastle.events/</a>' }, { coords: { lat: 53.37923, lng: -6.07201 }, iconImage: 'assets/img/places/Howth.png', content: '<h1>Howth</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.visithowth.ie/</a>' }, { coords: { lat: 55.1364, lng: -7.456 }, iconImage: 'assets/img/places/buncrana1.png', content: '<h1>Buncrana</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Buncrana</a>' }, { coords: { lat: 53.152999388, lng: -6.1499994 }, iconImage: 'assets/img/places/sugarloaf_icon.png', content: '<h1>Great sugar loaf</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/the-sugarloaf-trail/</a>' }, { coords: { lat: 52.0058, lng: -9.5562 }, iconImage: 'assets/img/places/killarney.png', content: '<h1>Killarney National Park </h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.killarneynationalpark.ie/</a>' }, { coords: { lat: 51.942662896, lng: -9.917162998 }, iconImage: 'assets/img/places/clifs.png', content: '<h1>Ring of Kerry</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://ringofkerrytourism.com/</a>' }, { coords: { lat: 52.679, lng: -7.814 }, iconImage: 'assets/img/places/clifs.png', //add picture!!!!!!!!!!!!!!! content: '<h1>Thurles</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.tipperary.com/thurles</a>' }, { coords: { lat: 52.348, lng: -6.517 }, iconImage: 'assets/img/places/wexford museum.png', content: '<h1>Irish National Heritage Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.irishheritage.ie/</a>' }, { coords: { lat: 53.018, lng: -6.398 }, iconImage: 'assets/img/places/wicklow.png', content: '<h1> Wicklow Mountains National Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.wicklowmountainsnationalpark.ie/</a>' }, { coords: { lat: 53.011299, lng: -6.326156 }, iconImage: 'assets/img/places/glendalough.png', content: '<h1> Glendalough </h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.glendalough.ie/</a>' }, { coords: { lat: 53.1876492494, lng: -6.083832998 }, iconImage: 'assets/img/places/Bray.png', content: '<h1> Bray</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.bray.ie/</a>' }, { coords: { lat: 53.144, lng: -6.072 }, iconImage: 'assets/img/places/greystones.png', content: '<h1>Greystones</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/greystones/</a>' }, { coords: { lat: 52.518664592, lng: -7.887329784 }, iconImage: 'assets/img/places/Cashel.png', content: '<h1>Rock of Cashel</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cashel.ie/</a>' }, { coords: { lat: 52.6477, lng: -7.2561 }, iconImage: 'assets/img/places/kilkenny.png', content: '<h1>Killenny</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://visitkilkenny.ie/</a>' }, //cork { coords: { lat: 51.902694, lng: -8.4767 }, iconImage: 'assets/img/places/butterCork.png', content: '<h1>Museum of Butter</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://thebuttermuseum.com/</a>' }, { coords: { lat: 51.89953, lng: -8.499022 }, iconImage: 'assets/img/places/prisoncork.png', content: '<h1>Cork City Gaol</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://corkcitygaol.com/</a>' }, { coords: { lat: 53.4513204, lng: -6.140871 }, iconImage: 'assets/img/places/malahideB.png', content: '<h1>Malahide</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.malahide.ie/</a>' }, { coords: { lat: 53.2839577, lng: -9.0837658 }, iconImage: 'assets/img/places/galway.png', content: '<h1>Galway</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.galwaytourism.ie/</a>' }, { coords: { lat: 53.470580, lng: -6.122405 }, iconImage: 'assets/img/places/galway.png', content: '<h1>Donabate Beach</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Donabate</a>' }, { coords: { lat: 52.9713299, lng: -9.4300415 }, iconImage: 'assets/img/places/clifsofmoher.png', content: '<h1>Donabate Beach</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cliffsofmoher.ie/</a>' }, { coords: { lat: 51.8960528, lng: -8.4980693 }, iconImage: 'assets/img/places/Cork.png', content: '<h1>Cork</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://purecork.ie/</a>' }, { coords: { lat: 53.3667776, lng: -6.5064198 }, iconImage: 'assets/img/places/Leixlip.png', content: '<h1>Leixlip</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://pl.wikipedia.org/wiki/Leixlip</a>' }, { coords: { lat: 53.1654628, lng: -6.125499 }, iconImage: 'assets/img/places/littlesugarloaf.png', content: '<h1>Little Sugar Loaf</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.greystonesguide.ie/little-sugar-loafs-big-day/</a>' }, { coords: { lat: 53.5474019, lng: -6.0933048 }, iconImage: 'assets/img/places/rockabill view.png', content: '<h1>Rockabill View</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.skerriesseatours.ie/trips.html</a>' }, { coords: { lat: 52.3337499, lng: -6.4906996 }, iconImage: 'assets/img/places/wexford.png', content: '<h1>Wexford</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.visitwexford.ie/</a>' }, ]; // Loop through markers var gmarkers = []; for (var i = 0; i < markers.length; i++) { gmarkers.push(addMarker(markers[i])); } //Add MArker function function addMarker(props) { var marker = new google.maps.Marker({ position: props.coords, map: map, }); /* if(props.iconImage){ marker.setIcon(props.iconImage); } */ //Check content if (props.content) { var infoWindow = new google.maps.InfoWindow({ content: props.content }); marker.addListener('click', function() { infoWindow.open(map, marker); }); } return marker; } var markerCluster = new MarkerClusterer(map, gmarkers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); } google.maps.event.addDomListener(window, 'load', initMap) </script>