Search code examples
javascriptgoogle-mapsgoogle-maps-api-3markerclusterer

adding URL to map marker in Marker Cluster google map API


So basically what I am trying to do is have a map cluster and once you click into the clusters and click on the individule map markers you will be linked off to a different page on my website.

this is what i have so far. but i cant seem to pull the URLS through.. into different markers.

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: -39.3642, lng: 164.0444318}
    });


    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        url: "http://travelpark.co.nz" //Will be different for each marker
      });

    });


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


   var locations = [
        {lat: -37.7862985, lng: 175.2773836},
      {lat: -37.8011434, lng: 174.871265}
   ]

   google.maps.event.addListener(markers, 'click', function() {
        window.location.href = this.url;
    });

The event listener at the bottom doesnt work.. i cant seem to figure this out. any help would be appreciated


Solution

  • Assign listener to each marker object not to the array. Use your map function itself to avoid 2 for loops:

     var markers = locations.map(function(location, i) {
                       var marker =  new google.maps.Marker({
                                    position: location,
                                    url: "http://travelpark.co.nz" //Will be different for each marker
                                    });
                       google.maps.event.addListener(marker, 'click', function(){
                                    window.location.href = this.url;
                                   });
                       return marker;
    });