atxgeek 


just one more geek in a sea of austin techies

November 10, 2015

Google Maps without Street Names #GoogleGeek

Use Google Maps' API to get
maps without street names.
Recently I needed a map without street names. Google Maps is my typical go-to mapping solution for work projects and at home.  A quick check of the current Google Maps web interface revealed no options for hiding street names.

The Google Maps API options contained exactly what I needed and I will now share that simple solution with you...



API = Application Programming Interface
For anyone who isn't aware, an "API" offers a way for programmers to interact with a third-party system.  In the case of Google Maps, the API allows programmers to create their own custom map solutions that leverage the Google Maps engine.  For instance, the owner of a chain of hamburger stands might want an interactive map that shows the company logo at every hamburger stand location -- you can do this using Google Maps API.

Many API options are already implemented in existing Google Maps interfaces.  The "layers" functionality is a good example of what you can do with APIs:  you can "turn on" or "turn off" map overlays (a.k.a. "layers") such as traffic congestion, bike routes, bus routes, etc.


Show Me Streets Without Names
Calm down, Bono, we're getting there.  Although the existing Google Maps interfaces don't currently offer an option to "turn off" street names, you can easily achieve this via the Maps API as follows:
  1. Use Google Maps to browse to your desired map location.
    Keep this window open -- you will need part of this map's URL.
     
  2. Open a new browser tab and paste in the following partial link:

    http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:off&zoom=16&center=
     
  3. Now, go back to the map you opened in step #1 and copy the coordinates from the URL.  The coordinates are latitude and longitude values -- they appear as two long numbers separated by a comma.

    Example (map of downtown Austin):
    https://www.google.com/maps/@30.2649046,-97.7434979,17.5z
     
  4. Go to tab #2 and paste these numbers onto the end of the partial URL.  The coordinates provide the needed values for the "center" parameter.  Using the example numbers above, the finished URL should look like:

    http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:off&zoom=16&center=30.2649046,-97.7434979

     
That's it -- browse to the finished URL from step #4 and you should have your map without any labels or street names.  You've just used one of Google's programming interfaces to generate a custom map!



Here is an example map with labels:
http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:on&zoom=16&center=30.2649046,-97.7434979

Here is the same map without labels:
http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:off&zoom=16&center=30.2649046,-97.7434979


There are a few items to note:

  • NO SCROLLING 
    This produces a static map -- you won't be able to interact with it like you can with a "normal" Google Map.
     
  • MAP SIZE 
    The maximum rendered map size is 640 pixels by 640 pixels.  You can use larger numbers for the "size" parameter but the result will still be limited to 640-by-640.  If you need larger maps you'll have to generate multiple 640-by-640 "tiles" and piece them together (which is how "normal" Google Maps work behind the scenes).
     
  • ZOOM 
    You may need to adjust the "zoom" parameter value to match that of your original Google Map.  This value is the last number followed by the letter "z".  On the custom Google Maps API link you'll substitute the "z" value from step #1 for the "zoom" parameter value in step #4 (but without the trailing letter "z").


Read more on Google Maps APIs for web and mobile platforms here:

   https://developers.google.com/maps/get-started/


Have you created a cool custom map using Google Maps APIs?
Link it in the comments, below!



7 comments:

  1. Great advice!!!!! Thanks. I was searching a solution and you have done a great explanation.

    ReplyDelete
    Replies
    1. Glad it helped. This definitely falls in the "niche need" category but, considering how easy it would be to implement, still a little surprising to me Google doesn't offer a "Hide Street Names" option on Google Maps. Thanks for the feedback.

      Delete
  2. It keeps getting the same location with different coordinates.

    ReplyDelete
  3. Omsta-
    Thanks for checking out the post/info. I just ran through and re-verified all still works as expected -- the post info remains up-to-date.

    Here is one link to an area near downtown Austin:
    http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:off&zoom=16&center=30.2948596,-97.7841337

    Here is another link to Austin's F1 race track:
    http://maps.googleapis.com/maps/api/staticmap?size=640x640&style=element:labels|visibility:off&zoom=16&center=30.1341475,-97.6360684

    You'll notice both links above are the same with the exception of the two coordinate numbers at the end of the link.

    Could you post examples of the different links you tried which returned the same results?

    ReplyDelete
  4. This saved my life. I pull and evaluate pixels on a google static map to avoid using paid services. Street names were really messing me up. With this, I can easily evaluate roads without the big black names getting in the way. Thanks!

    ReplyDelete
    Replies
    1. Always nice to hear when a post's info was helpful -- thanks for the feedback.

      Delete
  5. Exactly what i was looking for. Thanks a bunch

    ReplyDelete