Set different icons within long list of Google Map markers

Question

Hi I have a map where a large number of markers (100) drop on a custom google map. Currently the icon is set before running through loop of lat/long.

Based on the code below, is there a way to specify a different icon for a few specific locations be a different icon?

Thanks in advance

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
     var mapcenter = new google.maps.LatLng(###, ###);
     var icon = { 
    url: 'URL-OF-ICON'
};
       var houses = [
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), 
new google.maps.LatLng( ###, ###), <!-- I want these last two to be a different icon -->
new google.maps.LatLng( ###, ###)  <!-- I want these last two to be a different icon -->

      ];

      var markers = [];
      var iterator = 0;

      var map;


      function initialize() {
        var mapOptions = {
         zoom: 11,
        center: mapcenter,
        streetViewControl: false,
        mapTypeControl: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
       zoomControl: true,
       zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
       panControl: false
        };


        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);

        } 

 for (var i = 0; i < houses.length; i++) {
          setTimeout(function() {
            addMarker();
          }, i * 50);
        }

      function addMarker() {
 markers.push(new google.maps.Marker({
          icon: icon,
          position: houses[iterator],
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP
        }));
        iterator++;
      }

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


    </script>

possible duplicate of [Colour the first marker of a Google Map a different colour](http://stackoverflow.com/questions/16900210/colour-the-first-marker-of-a-google-map-a-different-colour) — geocodezip, Dec 07 '15 at 16:12
possible duplicate of [Display infowindow by default and different markers in Google Maps](http://stackoverflow.com/questions/16844370/display-infowindow-by-default-and-different-markers-in-google-maps) — geocodezip, Dec 07 '15 at 16:12

score 1 · Answer 1 · answered Dec 07 '15 at 16:05

1

Make each map marker it's own object

  var markerA = new google.maps.Marker({
    position: myLatLng,
    icon: url: 'images/beachball.png',
    map: map,
    title: 'Hello World!'
  });

var markerB = new google.maps.Marker({
    position: myLatLng,
    icon: url: 'images/beachflag.png',
    map: map,
    title: 'Hello World!'
  });

answered Dec 07 '15 at 16:05

Korgrue

3,430
1
13
20

Thanks would you say this is the best/only way? Reason is there are nearly 100 markers. – Bo C. Dec 07 '15 at 16:21
Performance wise, no. Unfortunately, this is the way that the API is set up. To add markers, instead of adding them using just their LatLang property, you are just defining the properties of each Marker object before you add it. LatLang is simply a property of the built in Marker object. Mapmarker( some lat lang, url: 'images/beachball.png', yourmapid, yourtitle) function Mapmarker(myLatLng, aicon, amap, atitle){ new google.maps.Marker({ this.position = myLatLng, this.icon = aicon, this.map = amap, this.title = atitle }); – Korgrue Dec 07 '15 at 16:35
Thank you for taking the time to explain, much appreciated. – Bo C. Dec 07 '15 at 18:49

Set different icons within long list of Google Map markers

1 Answers1