CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markersshadow
Bora Akgerman
Bora Akgerman

Reputation: 11

Google maps api, how to add marker shadows for multiple custom markers

Please see live demo here: http://www.bmbsuaritma.com.tr/bmb-su-aritma-kampanyali-urunler.html

You can find my marker shadow here: http://www.bmbsuaritma.com.tr/images/retail_logos/shadow-baumax.png

I am not able to add the shadow to my markers. My code is below, help would be appreciated

function initialize() {
var locations = [
['Tekzen Yapı Market - SİİRT ANDERA PARK AVM',37.933849,41.945507,2,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png','<font face="arial" size="2"><div dir="ltr"><a href="http://www.bmbsuaritma.com.tr" target="_blank"><img src="http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen-marker.png" alt="BMB Su Arıtma Cihazları"></a><br><strong><font color="blue">Mağaza:</font></strong> Siirt Andera Park AVM<br><strong><font color="blue">Adres:</font></strong> Andera Park AVM Yeni Mah.Cengiz Topal Cad.No:69, SİİRT<br><strong><font color="blue">Tel:</font></strong> (0484) 290 11 35 <br><br><a href="http://www.tekzen.com/Magazalarimiz" target="_blank"><strong><font color="red">&gt;&gt; Mağaza Sayfası</font></strong></a></div></font>'],
['Tekzen Yapı Market - DİYARBAKIR NCity AVM',37.929962,40.205238,1,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png','<font face="arial" size="2"><div dir="ltr"><a href="http://www.bmbsuaritma.com.tr" target="_blank"><img src="http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen-marker.png" alt="BMB Su Arıtma Cihazları"></a><br><strong><font color="blue">Mağaza:</font></strong> Diyarbakır NCity AVM<br><strong><font color="blue">Adres:</font></strong> N city avm .Turgut Özal Bulvarı MTA Bölge Müdürlüğü yanı Aydın Kent Şelale evleri No 1/84 Bağlar, DİYARBAKIR<br><strong><font color="blue">Tel:</font></strong> (0412) 237 76 20 <br><br><a href="http://www.tekzen.com/Magazalarimiz" target="_blank"><strong><font color="red">&gt;&gt; Mağaza Sayfası</font></strong></a></div></font>']

];

var map = new google.maps.Map(document.getElementById('map'), {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
zoom: 6,
center: new google.maps.LatLng(39, 33.3),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
  maxWidth: 220
});

var marker, i;

for (i = 0; i < locations.length; i++) {  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
zIndex: locations[i][3],
icon: locations[i][4],
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
  infowindow.setContent(locations[i][5]);
  infowindow.open(map, marker);
}
})(marker, i));
}
}

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

Upvotes: 0

Views: 2752

Answers (2)

Jaroslav Štreit
Jaroslav Štreit

Reputation: 430

Marker shadows are no longer supported in version 3.14 of the Google Maps JavaScript API.

The following is from https://developers.google.com/maps/documentation/javascript/markers:

Note: Marker shadows were removed in version 3.14 of the Google Maps JavaScript API. Any shadows specified programmatically will be ignored.

Upvotes: 2

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

Your updated code...

for (i = 0; i < locations.length; i++) {  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
zIndex: locations[i][3],
icon: locations[i][4],
shadow: yourShadowImageUrl // don't use ',' after last key value pair..since it won't work in IE
});

Upvotes: 1

Related Questions