I am doing a web dynamic project with a Google map in a body of my html/jsp page.
I made a function which create a marker thanks to (lat,lng,map) and use a special image.png as icon in the parameters of the marker.
In my map, I made two different styles (colors of map...) : "Day" and "Night".
I want to know how can I change the icon of my marker when user click on Night to change the style. Indeed, the color of the marker is not good for this style of map...
I tried to initialize a var image = /.../...png in the different styles with the same name, so i can use the var in the map code, but it doesn't work. Also i tried a if like
if(map.mapTypeControlOptions.mapTypeIds.equals(Day)){
var image=...png
} else {
var image=...png
}...
customMapTypeIdJour<div id="map"></div>
<script>
function initMap() {
var customMapTypeNuit = new google.maps.StyledMapType([
{
"featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "color": "#2b3f57" } ]
},
// ... the style of map
{
name: 'Nuit'
}
);
var customMapTypeJour = new google.maps.StyledMapType([
// a style of map
{
name: 'Jour'
}
);
var customMapTypeIdJour = 'Jour';
var customMapTypeIdNuit = 'Nuit';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.6666, lng: 1.43333},
zoom: 17,
streetViewControl: false,
zoomControl: false,
mapTypeControlOptions: {
mapTypeIds: [customMapTypeIdJour, customMapTypeIdNuit]
}
});
map.mapTypes.set(customMapTypeIdNuit, customMapTypeNuit);
map.mapTypes.set(customMapTypeIdJour, customMapTypeJour);
map.setMapTypeId(customMapTypeIdJour);
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Vous êtes ici.');
createMarqueur(lat, lng, map); // create a special marker with a special image as icon
map.setCenter(pos);
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
I started a bounty, but finally I have an answer. Based on google's documentation, there's getMapTypeId()
that return a MapTypeId
string (like 'Jour' or 'Nuit' (salut compatriote !)).
So, if you hold a markerList
you can do something like that:
google.maps.event.addListener( map, 'maptypeid_changed', function() {
if(map.getMapTypeId() == "Nuit"){
for(var i=0;i<markerList.length;i++){
markerList[i].setIcon("/resources/img/nuit.png");
}
}
else{
for(var i=0;i<markerList.length;i++){
markerList[i].setIcon("/resources/img/jour.png");
}
}
} );
According to this answer, maptypeid_changed
is a signal sent when mapTypeId
property changes.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With