Google Maps API v3 multiple markers not working due to custom images?

Question

I'm using the current code based off of Google's example, it works fine with one marker, but when I try and have multiple ones it fails.

I think it may have to do with my custom marker image, but not sure as I'm not great with this... Anyone have any ideas?

function initialize() {

  var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
  ];

  var myLatLng = new google.maps.LatLng(beach[1], beach[2], beach[3]);
  var mapPKCanvas = document.getElementById('main-map');

  var mapPKOptions = {
    center: new google.maps.LatLng(-33.890542, 151.274856),
    zoom: 15,
    draggable: true,
    scrollwheel: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)
  var url = 'https://www.customimage-map.png';
  var size = new google.maps.Size(64, 78);
  if (window.devicePixelRatio > 1.5) {
    url = 'https://www.customimage-mapx2.png';
    size = new google.maps.Size(64, 78);
  }
  var image = {
    url: url,
    size: size,
    scaledSize: new google.maps.Size(64, 78),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(18, 20)
  };
  var marker = new google.maps.Marker({
    position: myLatLng.getCenter(),
    map: mainMapPK,
    icon: image
  });

  marker.addListener('click', function() {
    infowindow.open(mainMapPK, marker);
  });

  google.maps.event.trigger(mainMapPK, "resize");

}

google.maps.event.addDomListener(window, 'load', initialize);

I get a javascript error with the posted code: `Uncaught ReferenceError: beach is not defined` — geocodezip, Jul 31 '19 at 11:40
possible duplicate of [Add custom icon by category on google map marker](https://stackoverflow.com/questions/35321691/add-custom-icon-by-category-on-google-map-marker) — geocodezip, Jul 31 '19 at 11:41

evan · Accepted Answer · 2019-08-10T16:50:35.273

Assuming that the path to your image is correct, I do not see any issues with your custom markers implementation. However, I do see several issues in the code snippet you've posted.

First of all, beach doesn't exist. It should be beaches. In addition, this is a 2d array, so you should be accessing the coordinates accordingly:

google.maps.LatLng(beaches[0][1], beaches[0][2])  // -33.890542, 151.274856

Secondly, to set your marker's position you're using getCenter() which the LatLng class does not support. If you want to use getCenter(), use the LatLngBounds class instead. Otherwise, just set the marker's position to your LatLng as is.

Try the amended code example below:

<div id="main-map" style="height:450px;"></div>

<script>
    function initialize() {

        var beaches = [
            ['Bondi Beach', -33.890542, 151.274856, 4],
            ['Coogee Beach', -33.923036, 151.259052, 5],
            ['Cronulla Beach', -34.028249, 151.157507, 3],
        ];

        var mapPKCanvas = document.getElementById('main-map');

        var mapPKOptions = {
            center: new google.maps.LatLng(-33.890542, 151.274856),
            zoom: 10,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: false,
            scaleControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)

        var url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png';

        var size = new google.maps.Size(64, 78);

        if (window.devicePixelRatio > 1.5) {
            url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png';
            size = new google.maps.Size(64, 78);
        }

        var image = {
            url: url,
            size: size,
            scaledSize: new google.maps.Size(64, 78),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(18, 20)
        };

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[2][1], beaches[2][2]),
            map: mainMapPK,
            icon: image
        });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[1][1], beaches[1][2]),
            map: mainMapPK,
            icon: image
        });

        var marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
            map: mainMapPK,
            icon: image
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>

Hope this helps!

Thank you that's brilliant however, i cannot get it to work do i need a specific API turned on via the key, i've just got the default map ones turned on? — user4630, Aug 05 '19 at 07:29
In my code above, you need to replace YOUR_API_KEY with your own project's API key. Also you need the JavaScript API enabled on your project and billing enabled too for the API to work at all. Refer to [this guide](https://developers.google.com/maps/gmp-get-started#setup-procedures). Please keep me posted. :) — evan, Aug 05 '19 at 07:53
Thanks Evan, i used the current API key, as we already have 2 custom maps running with the following enabled... Geocoding API, Geolocation API, Maps Embed API, Maps JavaScript API. Do i need any others? — user4630, Aug 06 '19 at 08:05
For the above code example you only need the JavaScript API enabled. Do you also have billing enabled? What errors are you getting when testing it with your API key? Please try this JSbin: https://jsbin.com/mibugekegi/edit?html,console,output — evan, Aug 06 '19 at 08:35

Google Maps API v3 multiple markers not working due to custom images?

1 Answers1