Activity Stream
245,395 MEMBERS
1164 ONLINE
GPSurl On YouTube Subscribe to our Newsletter GPSurl On Twitter GPSurl On Facebook GPSurl On Google+
[Tutorial] How to add custom background layers to Google Maps

Results 1 to 1 of 1
  1.     
    #1
    journeyx's Avatar

    Free [Tutorial] How to add custom background layers to Google Maps

    When you create a Google Map with GPS Visualizer, the "map type" menu in the upper-right corner of the map contains many options that you don't get on maps.google.com. (And the list is always growing; if you find out about a publicly-accessible map layer that might be a good addition, send a note to the contact address at the bottom of this page.)

    But sometimes you might have a specific need for a layer that doesn't warrant inclusion in the universal list. No problem: with a text editor, you can alter the guts of your map to include any map server that uses Google-style tiles in the Mercator projection. This page will show you how. Of course, you'll need to have a little bit of experience with HTML and JavaScript.

    Adding one simple layer

    Almost everything you need to do will involve the gv_options.map_type_control variable. In the first example, we'll create a map with a very specific custom layer: aerial photos of the damage done by a tornado in Moore, Oklahoma in May 2013.

    The map tiles are stored on the Google Crisis Response server, and each tile's URL looks something like this:

    Code:
    Only the registered members can see the CODE Contents. Please Login OR Register.


    Those last three numbers are the X (longitude), Y (latitude), and Z (zoom) "coordinates" of the tile. Typically, Z will be the smallest number (almost always between 0 and 20); the others are X and Y, but not always in that order. (Sometimes there will be documentation that tells you explicitly which is which.) In the custom code that you insert into your map, you'll replace the numbers with {X}, {Y}, and {Z}; those curly brackets are important.

    For our simple tornado damage example, we can incorporate the tiles into our map using a statement like this:

    Code:
    Only the registered members can see the CODE Contents. Please Login OR Register.


    The url parameter is the most important; menu_name is useful because it defines how your new map shows up in the map type menu; credit is what shows up at the bottom of the map, and it can include HTML code such as hyperlinks. You'll want to remember what you choose for the id if you want the map to initially load with your custom map visible, because you would place that value in the gv_options.map_type variable.


    Putting an existing background behind the custom layer

    There's an minor problem with the example map above: the custom layer only covers a small area, and it's blank outside that area. Ideally, we'd like to show a normal Google Maps background "behind" the tornado damage imagery. We can do that by adding a background parameter to the gv_options.map_type_control statement. The value of background will be one of GPS Visualizer's map codes or map code aliases; you can find a list of all the current map types here. In this case, we'll use Google's "hybrid" map view; GPS Visualizer's code for that is "GV_HYBRID".

    [Tutorial] How to add custom background layers to Google Maps

    [Login or Register to remove this advertisement]



    Code:
    Only the registered members can see the CODE Contents. Please Login OR Register.



    Adjusting the opacity of the foreground layer

    You can also have your custom layer be less than 100% opaque, so that the background partially shows through. To do that, just add an opacity parameter to your custom map definition.

    Code:
    Only the registered members can see the CODE Contents. Please Login OR Register.
    journeyx Reviewed by journeyx on . [Tutorial] How to add custom background layers to Google Maps When you create a Google Map with GPS Visualizer, the "map type" menu in the upper-right corner of the map contains many options that you don't get on maps.google.com. (And the list is always growing; if you find out about a publicly-accessible map layer that might be a good addition, send a note to the contact address at the bottom of this page.) But sometimes you might have a specific need for a layer that doesn't warrant inclusion in the universal list. No problem: with a text editor, you Rating: 5

  2. The Following 1 Users Say Thank You to journeyx For This Useful Post:
    [ Click To Expand ]

    R@me$h (6th January 2017)

  3.   Advertisements

    [Tutorial] How to add custom background layers to Google Maps

  Suggested Articles:

[Tutorial] How to add custom background layers to Google Maps

Tags for this Thread

Amount:

Enter a message for the receiver:
BE SOCIAL
[Tutorial] How to add custom background layers to Google Maps [Tutorial] How to add custom background layers to Google Maps [Tutorial] How to add custom background layers to Google Maps GPSurl On Facebook [Tutorial] How to add custom background layers to Google Maps