Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Google Maps Without Any Labels/Country Names

DZone's Guide to

Google Maps Without Any Labels/Country Names

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

I wanted to get a blank version of Google Maps without any of the country names on for a visualisation I’m working on but I’d been led to believe that this wasn’t actually possible.

In actual fact we do have control over whether the labels are shown via the ‘styles’ option which we can call on the map.

In my case the code looks like this:

var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 3,
  center: new google.maps.LatLng(31.492121, 14.919434),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
var emptyStyles = [
  {
    featureType: "all",
    elementType: "labels",
    stylers: [ { visibility: "off" } ]
  }
];
 
map.setOptions({styles: emptyStyles});

And this is the result:

Map no labels

 

 

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}