Google Maps Styling + Marker Animation
My response to a question on StackOverflow -- http://stackoverflow.com/questions/4501695/why-do-custom-styled-google-maps-v3-not-support-marker-animation-pin-drop/4502752#4502752
by Duncan Cumming
April 19, 2016
HTML
<div id="wrapper">
<div id="map_canvas"></div>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
CSS
#wrapper { width: auto; margin: 0 auto }
#map_canvas { height: 500px; width: auto }
JavaScript
function initialize() {
var mapStyles = [{
"featureType": "all",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi.attraction",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}];
var latlng = new google.maps.LatLng(51.915422, 4.473341);
var mapOptions = {
center: latlng,
zoom: 14,
styles: mapStyles
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
{
var stylez = [
{
featureType: "poi.attraction",
elementType: "label",
stylers: [
{ visibility: "on" }
]
}
];
var latlng = new google.maps.LatLng(51.518279, -0.1152455), // London
mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"]
},
zoom: 14,
center: latlng
},
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}),
marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello World!"
}),
infowindow = new google.maps.InfoWindow({
content: "<div><img width='150' height='30' src='http://vsecure.hostelbookerstest2.com.test4.ch.hostelworld.com/static/images/0.0.441.0/hostelbookers/logos/logo-inverse.svg'</div>"
});
map.mapTypes.set("Edited", styledMapType);
map.setMapTypeId('Edited');
function toggleBounce () {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
...