GoogleMaps change icon's marker when MapStyle change

Question

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>

How are you putting "Day" here mapTypeIds.equals(Day)? I am not sure but probably this part of the code including the if..else is not executing which is setting the custom icons. — AniV
In my code i didn't have this "if" ,I just tried it and put it after navigator.geolocation.getCurrent Position(...). Just don"t consider it in the code above. — DionysoSong

BuzzRage BuzzRage · Accepted Answer · 2018-04-03T18:21:06

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.

GoogleMaps change icon's marker when MapStyle change

2 Answers