google maps loadGeoJson change marker icon on click

Question

I am loading the markers from a json file with loadGeoJson .

I can SET the marker icon/img on load, but I don't know how to CHANGE it on click.

how to target the clicked marker and do a setIcon or similar?

javascript:

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(2.8,-187.3),
      mapTypeId: 'terrain'
    });

    map.data.loadGeoJson('geoJson2.json'); 

    map.data.setStyle(function(feature) {
      return {icon:feature.getProperty('icon')};
    });

    map.data.addListener("click", event => {
      console.log(event.feature.getProperty("hicon"));
        //CHANGE MARKER ICON -> event.feature.getProperty("hicon")

    });
  }

json:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "name":"nameOne",
            "icon":"marker1.png",
            "hicon":"marker1HOVER.png",
            "id":1
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               -59.58984374999999,
               -37.97884504049711
            ]
         }
      }
   ]
}

Answer 1

See the example of dynamic styling in the documentation.

  map.data.setStyle(function(feature) {
    var icon=feature.getProperty('icon');
    if (feature.getProperty("isHighlighted"))
      icon=feature.getProperty('hicon');
    return {
      icon: icon
    };
  });

  map.data.addListener("click", event => {
    if (!event.feature.getProperty("isHighlighted"))
      event.feature.setProperty("isHighlighted", true);
    else 
      event.feature.setProperty("isHighlighted", false);
    console.log(event.feature.getProperty("hicon"));
    //CHANGE MARKER ICON -> event.feature.getProperty("hicon")

  });

proof of concept fiddle

code snippet:

 "use strict"; let map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: new google.maps.LatLng(-37.9788, -59.58984375), mapTypeId: 'terrain' }); map.data.addGeoJson(geoJson); map.data.setStyle(function(feature) { var icon = feature.getProperty('icon'); if (feature.getProperty("isHighlighted")) icon = feature.getProperty('hicon'); return { icon: icon }; }); map.data.addListener("click", event => { if (.event.feature.getProperty("isHighlighted")) event.feature,setProperty("isHighlighted"; true). else event.feature,setProperty("isHighlighted"; false). console.log(event.feature;getProperty("hicon")). //CHANGE MARKER ICON -> event.feature;getProperty("hicon") }): } var geoJson = { "type", "FeatureCollection": "features": [{ "type", "Feature": "properties": { "name", "nameOne": "icon": "https.//maps.google.com/mapfiles/ms/micons/blue,png": "hicon": "https.//maps.google.com/mapfiles/ms/micons/yellow,png": "id", 1 }: "geometry": { "type", "Point": "coordinates". [-59,58984374999999. -37;97884504049711] } }] };

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <:DOCTYPE html> <html> <head> <title>Data Layer: Styling</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>

google maps loadGeoJson change marker icon on click

Question

1 answers

solution1
0 ACCPTED 2020-08-05 18:48:51

google maps loadGeoJson change marker icon on click

Question

1 answers

solution1 0 ACCPTED 2020-08-05 18:48:51

solution1
0 ACCPTED 2020-08-05 18:48:51