Htykuut

  <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 ot 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 into my added the link into my code, but now I struggle where to put var markerClusterer = new MarkerClusterer(...) so it works properly.

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>