CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
Behseini
Behseini

Reputation: 6320

Google Maps Customized Marker icons for different markers not displaying

I have an array of custom Icons as:

 var iconBase = 'http://localhost/icons/';

 var icons = {
 red: {
    icon: iconBase + 'red.png'
  },
  green: {
    icon: iconBase + 'green.png'
  },
  info: {
    icon: iconBase + 'red.png'
  }
};

Now when I call them in Marker like this icon: icons[red].icon, at:

var marker = new google.maps.Marker({
  position: latlng,
  icon: icons[red].icon,
  map: map
});

I am not getting any marker on the map can you please let me know what I am doing wrong? Here is the whole Code:

var map;
$(document).ready(function () {
        var latlng = new google.maps.LatLng(49.241943, -122.889318);
        var myOptions = {
                        zoom: 17,
                        center: latlng,
                        disableDefaultUI: true,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scaleControl: true,
                        panControl: true,
                        mapTypeControl:true,
                        mapTypeControlOptions: {
  style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position:google.maps.ControlPosition.TOP_CENTER
},
                        zoomControl: true
        };
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 //Icon Contoling
     var iconBase = 'http://localhost/icons/';
    var icons = {
  red: {
    icon: iconBase + 'red.png'
  },
  green: {
    icon: iconBase + 'green.png'
  },
  info: {
    icon: iconBase + 'red.png'
  }
};

var marker = new google.maps.Marker({
  position: latlng,
  icon: icons[red].icon,
  map: map
});

});

Upvotes: 0

Views: 642

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22486

ReferenceError: red is not defined

Try changing

icon: icons[red].icon

to

icon: icons['red'].icon

Upvotes: 1

Related Questions