title: Increase size of custom markers while zooming in? Using Google Maps and GeoJSON
body: <p>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. </p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    &lt;/style&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false &amp;libraries=visualization"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      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);
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have seen some solutions here but I don't know how to apply it when calling a GeoJSON file from outside. (<a href="https://stackoverflow.com/questions/36397627/how-to-set-google-maps-marker-size-dynamically/36401645#36401645">How to set Google maps marker size dynamically</a>)</p>