CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
DionysoSong
DionysoSong

Reputation: 807

GoogleMaps change icon's marker when MapStyle change

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>

Upvotes: 7

Views: 593

Answers (2)

BuzzRage
BuzzRage

Reputation: 184

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.

Upvotes: 7

Jakub Muda
Jakub Muda

Reputation: 6744

Did you try using svg graphics? You can easily change its appearance using javascript.

You have to make svg of your marker using vector editor software like Corel Draw, Adobe Illustrator or any other free programs. Open the resulting file in text editor and you will find something like this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25000 6000">
    <path d=" <!--svg path here--> ">
</svg>

You apply css:

svg path{fill:red} /*any color here*/

Any changes you want to make using javascript to change color can be done using simple change of the above css. I hope I gave you some idea how marker can be changed.

Upvotes: 5

Related Questions