Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a map without labels?

Tags:

google-maps

I want to get a map (I only need a picture) that has the road network but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry" works.

But, for example, this link is still full of texts.

How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...

like image 825
Aaron Avatar asked Feb 25 '12 14:02

Aaron


4 Answers

Use this style:

style=feature:all|element:labels|visibility:off

it will hide all labels for all features.

http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512&center=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off

like image 65
Dr.Molle Avatar answered Oct 17 '22 06:10

Dr.Molle


I got a better solution:

Create a html file and insert the code below.

<!DOCTYPE html>
<html>
  <head>
    <title>Mapa GMR Norte</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var customMapType = new google.maps.StyledMapType([
      {
        elementType: 'labels',
        stylers: [{visibility: 'off'}]
      }
    ], {
      name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 41.4416459, lng: -8.2911885},  // Brooklyn.
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
        async defer></script>
  </body>
</html>

Hope it helps! :)

like image 39
Pedro Ribeiro Avatar answered Oct 17 '22 07:10

Pedro Ribeiro


The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).

https://mapstyle.withgoogle.com/

like image 5
Nikki Avatar answered Oct 17 '22 06:10

Nikki


This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.

like image 4
Mano Marks Avatar answered Oct 17 '22 08:10

Mano Marks