Search code examples
javascriptgoogle-maps-api-3zoominggoogle-maps-markersgeojson

Increase size of custom markers while zooming in? Using Google Maps and GeoJSON

I have a map where I call 150 locations through a GeoJSON file and each one is represented by a custom image (22px,17px). The issue comes when zooming in (after zoom 17) where these markers look relatively tiny. I would like to know is there a way to ensure getting the same size on my icons whenever I zoom in.

Here is the code:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false &libraries=visualization"></script>

  <script>
    var map;

    function initialize() {


      var mapOptions = {
        zoom: 13,
        scrollwheel: true,
        panControl: true,
        zoomControl: true,
        scaleControl: false,
        disableDefaultUI: false,
        center: new google.maps.LatLng(19.043516, -98.198232),
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
      };

      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);



      var script = document.createElement('script');
      script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
      document.getElementsByTagName('head')[0].appendChild(script);


      map.data.setStyle(function(feature) {
        var mag = 3;
        var grd = feature.getProperty('Grd');
        var ctgData = feature.getProperty('Ctg');
        var ctgColor = {
          "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
          "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
          "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
        };
        return ({
          icon: ctgColor[ctgData]
        });
      });

    }

    function eqfeed_callback(results) {
      map.data.addGeoJson(results);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

I have seen some solutions here but I don't know how to apply it when calling a GeoJSON file from outside. (How to set Google maps marker size dynamically)

Solution

  • You can scale the existing markers up as is done in the question you reference

    google.maps.event.addListener(map, 'zoom_changed', function() {
  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    var size;
    var zoom = map.getZoom(); 
    if (zoom > 13) {
      size = new google.maps.Size(44,34);
    } else {
    size = new google.maps.Size(22,17);
    }
    return ({
      icon: {url: ctgColor[ctgData],
      size: size,
      scaledSize: size}
    });
  });
})

    They will get fuzzy, you are better off creating separate markers for the higher zoom levels.

    code snippet:

    var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    scrollwheel: true,
    panControl: true,
    zoomControl: true,
    scaleControl: false,
    disableDefaultUI: false,
    center: new google.maps.LatLng(19.043516, -98.198232),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var script = document.createElement('script');
  script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
  document.getElementsByTagName('head')[0].appendChild(script);


  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    return ({
      icon: ctgColor[ctgData]
    });
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    map.data.setStyle(function(feature) {
      var mag = 3;
      var grd = feature.getProperty('Grd');
      var ctgData = feature.getProperty('Ctg');
      var ctgColor = {
        "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
        "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
        "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
      };
      var size;
      var zoom = map.getZoom();
      document.getElementById("zoom").innerHTML = zoom;
      if (zoom > 13) {
        size = new google.maps.Size(44, 34);
      } else {
        size = new google.maps.Size(22, 17);
      }
      return ({
        icon: {
          url: ctgColor[ctgData],
          size: size,
          scaledSize: size
        }
      });
    });
  })
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}

google.maps.event.addDomListener(window, 'load', initialize);
    html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="zoom"></div>
<div id="map-canvas"></div>