javascript - GoogleMaps change icon's marker when MapStyle change - Stack Overflow

admin管理员组

文章数量:1415684

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 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>

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Apr 10, 2018 at 14:35 benmccallum 1,3781212 silver badges3030 bronze badges asked Dec 7, 2015 at 8:04 DionysoSongDionysoSong 80711 gold badge1414 silver badges2929 bronze badges 3

• If you need more informations, tell me please – DionysoSong Commented Dec 7, 2015 at 11:29
• 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 Commented Dec 9, 2015 at 0:37
• 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 Commented Dec 9, 2015 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 patriote !)).

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.

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/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.

本文标签： javascriptGoogleMaps change icon39s marker when MapStyle changeStack Overflow