Omit Google Maps City/State labels for particular countries Javascript API

Question

Situation: I have a map of Canada using Google Maps Javascript API. The app only involves Canada, so I'd like to hide all the state labels in the US. Basically need to know if there is a way possible with the API to omit all labels but Canada.

geocodezip · Answer 1 · 2021-03-16T15:08:02.017

You can't control the labels by country. You can hide them all and "manually" add the ones for Canada. You will need a source for the data {geonames.org is one), and to determine which ones are in view and to display at particular zoom levels.

Similar questions:

proof of concept fiddle

code snippet:

var mapLabels = [];
var CanadaBounds = new google.maps.LatLngBounds();

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    styles: [{
      "featureType": "administrative.locality",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    }]
  });
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Canada"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      CanadaBounds = results[0].geometry.viewport;
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    var south = bounds.getSouthWest().lat();
    if (south < CanadaBounds.getSouthWest().lat())
      south = CanadaBounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();
    if (west < CanadaBounds.getSouthWest().lng())
      west = CanadaBounds.getSouthWest().lng()
    var north = bounds.getNorthEast().lat();
    if (north > 85) north = 85;
    var east = bounds.getNorthEast().lng();
    if (east > CanadaBounds.getNorthEast().lng())
      east = CanadaBounds.getNorthEast().lng();
    document.getElementById('bounds').innerHTML = bounds.toUrlValue(6);
    var urlStr = "http://api.geonames.org/citiesJSON?formatted=true&south=" + south.toFixed(6) + "&west=" + west.toFixed(6) + "&north=" + north.toFixed(6) + "&east=" + east.toFixed(6) + "&lang=en&username=geocodezip&style=full";
    $.getJSON(urlStr, function(data) {
      bounds = new google.maps.LatLngBounds();

      for (var i = 0; i < data.geonames.length; i++) {
        if (data.geonames[i].countrycode != "CA") continue;
        var marker = new google.maps.Marker({
          position: {
            lat: data.geonames[i].lat,
            lng: data.geonames[i].lng
          },
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 3,
            strokeWeight: 2
          },
          map: map,
          title: data.geonames[i].name
        });
        bounds.extend(marker.getPosition());
        var myOptions = {
          content: data.geonames[i].name,
          boxStyle: {
            border: "none",
            textAlign: "center",
            fontSize: "8pt",
            width: "100px"
          },
          disableAutoPan: true,
          pixelOffset: new google.maps.Size(-50, 2),
          position: new google.maps.LatLng(data.geonames[i].lat, data.geonames[i].lng),
          closeBoxURL: "",
          isHidden: false,
          pane: "mapPane",
          enableEventPropagation: true
        };

        var ibLabel = new InfoBox(myOptions);
        ibLabel.open(map);
        mapLabels.push(ibLabel);
      }
      // map.fitBounds(bounds);
    });

  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    for (var i = 0; i < mapLabels.length; i++) {
      if (map.getZoom() > 5) {
        mapLabels[i].setVisible(true);
      } else {
        mapLabels[i].setVisible(false);
      }
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Omit Google Maps City/State labels for particular countries Javascript API

1 Answers1