javascript - Marker Cluster Links with Google Maps

Question

So I'm making a real estate website, and the client has asked that all properties can be viewed on a map. I thought the best way to do this to avoid it looking too cluttered would be to use Marker Clusters. However, I need each individual marker to link to that specific properties page. I'm not too experienced with Javascript so I'm struggling to crack this one.

Right now, the map is completely unresponsive (You cant move or zoom the map) and no markers are displayed.

This is my code so far, where am I going wrong?

<script>
function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 7,
   center: {<?php echo convertAddressToLngLat('Hastings, East Sussex');?>}
});

var markers = locations.map(function(link, location, i) {
    var marker =  new google.maps.Marker({
        position: location,
        url: link //Will be different for each marker
    });

    google.maps.event.addListener(marker, 'click', function(){
        window.location.href = this.url;
    });
    return 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 = [
     ["www.google.com", {lat: 50.8542590, lng: 0.5734530}],
 ]
 </script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlrUspRmip7Verfu7IDtW-FYkkum1QZMs&callback=initMap"></script>

Answer 1

Firstly, you call initMap once Google's JS loads, but you try creating the markers immediately. Add that code into initMap, or at least into another function that's called from initMap.

Secondly, you create the marker without specifying its map, which you need to do. So add map: map to your marker's properties.

Thirdly, you create map as a local variable to your initMap function, so it won't be accessible where you currently create your marker (unless you move that into the initMap function), or where you create your MarkerClusterer. Either put all the code that references map in the same function, or make map a global variable.

Also you seem to have a JS error where you create the map, I don't see the closing }) you need.

And there was an error in how you're using the Array.map() callback.

Here's an amended version:

function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 7,
       center: {<?php echo convertAddressToLngLat('Hastings, East Sussex');?>}
   });

   var locations = [
     ["www.google.com", {lat: 50.8542590, lng: 0.5734530}],
    ];

    var markers = locations.map(function(location) {
        var marker = new google.maps.Marker({
            map: map,
            position: location[1],
            url: location[0] //Will be different for each marker
        });

        google.maps.event.addListener(marker, 'click', function(){
            window.location.href = this.url;
        });
        return 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'});
}