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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

 

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Mark Needham, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}