vADC Docs

Embedded Google Maps - Augmenting Web Applications with Traffic Manager

by dnahas on ‎09-22-2014 01:01 PM - edited on ‎06-01-2015 01:04 PM by PaulWallace (5,280 Views)

Dynamic information is more abundant now than ever, but we still see web applications provide static content. Unfortunately many websites are still using a static picture for a location map because of application code changes required. Traffic Manager provides the ability to insert the required code into your site with no changes to the application. This simplifies the ability to provide users dynamic and interactive content tailored for them.  Fortunately, Google provides an API to use embedded Google maps for your application. These maps can be implemented with little code changes and support many applications. This document will focus on using the Traffic Manager to provide embedded Google Maps without configuration or code changes to the application.

 

"The Google Maps Embed API uses a simple HTTP request to return a dynamic, interactive map. The map can be easily embedded in your web page by setting the Embed API URL as the src attribute of an iframe...

 

Google Maps Embed API maps are easy to add to your webpage—just set the URL you build as the value of an iframe's src attribute. Control the size of the map with the iframe's height and width attributes. No JavaScript required. "... -- Google Maps Embed API — Google Developers

 

Google Maps Embedded API Notes

 

Please reference the Google Documentation at Google Maps Embed API — Google Developers for additional information and options not covered in this document.

 

Google API Key

 

Before you get started with the Traffic Script, your need to get a Google API Key. Requests to the Google Embed API must include a free API key as the value of the URL key parameter. Your key enables you to monitor your application's Maps API usage, and ensures that Google can contact you about your website/application if necessary. Visit Google Maps Embed API — Google Developers to for directions to obtain an API key.

 

By default, a key can be used on any site. We strongly recommend that you restrict the use of your key to domains that you administer, to prevent use on unauthorized sites. You can specify which domains are allowed to use your API key by clicking the Edit allowed referrers... link for your key. -- Google Maps Embed API — Google Developers

 

The API key is included in clear text to the client ( search nerdydata for "https://www.google.com/maps/embed/v1/place?key=" ). I also recommend you restrict use of your key to your domains.

 

Map Modes

 

Google provides four map modes available for use,and the mode is specified in the request URL.

 

  1. Place mode displays a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.
  2. Directions mode displays the path between two or more specified points on the map, as well as the distance and travel time.
  3. Search mode displays results for a search across the visible map region. It's recommended that a location for the search be defined, either by including a location in the search term (record+stores+in+Seattle) or by including a center and zoom parameter to bound the search.
  4. View mode returns a map with no markers or directions.

 

A few use cases:

 

  • Display a map of a specific location with labels using place mode (Covered in this document).
  • Display Parking and Transit information for a location with Search Mode.(Covered in this document).
  • Provide directions (between locations or from the airport to a location) using Directions mode
  • Display nearby Hotels or tourist information with Search mode using keywords or "lodging" or "landmarks"
  • Use geo location and Traffic Script and provide a dynamic Search map of Gym's local to each visitor for your fitness blog.
  • My personal favorite for Intranets
    • Save time figuring out where to eat lunch around the office and use Search Mode with keyword "restaurant"
    • Improve my Traffic Script productivity and use Search Mode with keyword "coffee+shops"

     

    Traffic Script Examples

     

    Example 1: Place Map (Replace a string)

     

    This example covers a basic method to replace a string in the HTML code. This rule will replace a string within the existing HTML with Google Place map iframe HTML, and has been formatted for easy customization and readability.

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    #Only process text/html content 
    if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break;  
       
    $nearaddress = "680+Folsom+St.+San+Francisco,+CA+94107";  
    $googleapikey = "YOUR_KEY_HERE";  
    #Map height and width  
    $mapheight = "420";  
    $mapwidth = "420";  
       
    #String of HTML to be replaced  
    $insertstring = "<!-- TAB 2 Content (Office Locations) -->";  
       
    #Replacement HTML  
    $googlemaphtml = "<iframe width=\"".$mapwidth."\" height=\"".$mapheight."\" ".  
    "frameborder=\"0\" style=\"border:0\" src=\"".$googlemapurl."?q=".  
    "".$nearaddress."&key=".$googleapikey."\"></iframe>".  
       
    #Get the existing HTTP Body for modification  
    $body = http.getResponseBody();  
       
    #Regex sub against the body looking for the defined string  
    $body = string.replaceall( $body, $insertstring, $googlemaphtml );  
    http.setResponseBody( $body ); 

     

    Example 2: Search Map (Replace a string)

    This example is the same as Example 1, but a change in the map type (note the change in the $googlemapurl?q=parking+near). This rule will replace a string within the existing HTML with Google Search map iframe HTML, and has been formatted for easy customization and readability.

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    #Only process text/html content 
    if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break;   
         
    $nearaddress = "680+Folsom+St.+San+Francisco,+CA+94107";   
    $googleapikey = "YOUR_KEY_HERE";   
    #Map height and width   
    $mapheight = "420";   
    $mapwidth = "420";   
         
    #String of HTML to be replaced   
    $insertstring = "<!-- TAB 2 Content (Office Locations) -->";   
         
    #Replacement HTML   
    $googlemaphtml = "<iframe width=\"".$mapwidth."\" height=\"".$mapheight."\" ".   
    "frameborder=\"0\" style=\"border:0\" src=\"".$googlemapurl."?q=parking+near+".   
    "".$nearaddress."&key=".$googleapikey."\"></iframe>".   
         
    #Get the existing HTTP Body for modification   
    $body = http.getResponseBody();   
         
    #Regex sub against the body looking for the defined string   
    $body = string.replaceall( $body, $insertstring, $googlemaphtml );   
    http.setResponseBody( $body ); 

     

    Example 3: Search Map (Replace a section)

     

    This example provides a different method to insert code into the existing HTML. This rule uses regex to replace a section of the existing HTML with Google map iframe HTML, and has also been formatted for easy customization and readability. The change from Example 2 can be noted (See $insertstring and string.regexsub).

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    #Only process text/html content 
       
    if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break;   
         
    $nearaddress = "680+Folsom+St.+San+Francisco,+CA+94107"
     $googleapikey = "YOUR_KEY_HERE"
     #Map height and width 
     $mapheight = "420"
     $mapwidth = "420"
        
     #String of HTML to be replaced 
     $insertstring = "</a>Parking</h4>(?s)(.*)<!-- TAB 2 Content \\(Office Locations\\) -->"
        
     #Replacement HTML 
     $googlemaphtml = "<iframe width=\"".$mapwidth."\" height=\"".$mapheight."\" "
     "frameborder=\"0\" style=\"border:0\" src=\"".$googlemapurl."?q=parking+near+"
     "".$nearaddress."&key=".$googleapikey."\"></iframe>"
        
     #Get the existing HTTP Body for modification 
     $body = http.getResponseBody(); 
        
     #Regex sub against the body looking for the defined string 
     $body = string.regexsub( $body, $insertstring, $googlemaphtml ); 
     http.setResponseBody( $body );  

     

    Example 3.1 (Shortened)

     

    For reference a shortened version of the Example 3 Rule above (with line breaks for readability):

     

    1
    2
    3
    4
    5
    6
    7
    8
    if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break;   
          
       http.setResponseBody ( string.regexsub( http.getResponseBody(), 
       "</a>Parking</h4>(?s)(.*)<!-- TAB 2 Content \\(Office Locations\\) -->"
       "<iframe width=\"420\" height=\"420\" frameborder=\"0\" style=\"border:0\" "
       "q=parking+near+680+Folsom+St.+San+Francisco,+CA+94107"
       "&key=YOUR_KEY_HERE\"></iframe>" ) );  

     

    Example 4: Search Map ( Replace a section with formatting, select URL, & additional map)

     

    This example is closer to a production use case. Specifically this was created with www.riverbed.com as my pool nodes. This rule has the following changes from Example 3: use HTML formatting to visually integrate with an existing application (<div class=\"six columns\">), only process for the desired URL path of contact (line #3), and provides an additional Transit Stop map (lines 27-31).

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    #Only process text/html content in the contact path 
    if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html")  
       || http.getpath() == "contact") break; 
       
    $nearaddress = "680+Folsom+St.+San+Francisco,+CA+94107"
    $mapcenter = string.urlencode("37.784465,-122.398570"); 
    $mapzoom = "14"
    #Google API key 
    $googleapikey = "YOUR_KEY_HERE"
    #Map height and width 
    $mapheight = "420"
    $mapwidth = "420"
       
    #Regex match for the HTML section to be replaced 
    $insertstring = "</a>Parking</h4>(?s)(.*)<!-- TAB 2 Content \\(Office Locations\\) -->"
       
    #Replacment HTML 
    $googlemapshtml =  
    #HTML cleanup (2x "</div>") and New Section title 
    "</div></div></a><h4>Parking and Transit Information</h4>"
    #BEGIN Parking Map. Using existing css for layout 
    "<div class=\"six columns\"><h5>Parking Map</h5>"
    "<iframe width=\"".$mapwidth."\" height=\"".$mapheight."\" frameborder=\"0\" "
    "style=\"border:0\" src=\"".$googlemapurl."?q=parking+near+".$nearaddress.""
    "&key=".$googleapikey."\"></iframe></div>"
    #BEGIN Transit Map. Using existing css for layout 
    "<div class=\"six columns\"><h5>Transit Stop's</h5>"
    "<iframe width=\"".$mapwidth."\" height=\"".$mapheight."\" frameborder=\"0\" "
    "style=\"border:0\" src=\"".$googlemapurl."?q=Transit+Stop+near+".$nearaddress.""
    "&center=".$mapcenter."&zoom=".$mapzoom."&key=".$googleapikey."\"></iframe></div>"
    #Include the removed HTML comment 
    "<!-- TAB 2 Content (Office Locations) -->"
       
    #Get the existing HTTP Body for modification 
    $body = http.getResponseBody(); 
       
    #Regex sub against the body looking for the defined string 
    $body = string.regexsub( $body, $insertstring, $googlemapshtml ); 
    http.setResponseBody( $body ); 

     

    Example 4.1 (Shortened)

     

    For reference a shortened version of the Example 4 Rule above (with line breaks for readability):

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    if ( !string.startsWith ( http.getResponseHeader( "Content-Type" ), "text/html" )    
       || http.getpath() == "contact" ) break;   
         
    http.setResponseBody( string.regexsub(  http.getResponseBody() ,   
    "</a>Parking</h4>(?s)(.*)<!-- TAB 2 Content \\(Office Locations\\) -->" ,    
    "</div></div></a><h4>Parking and Transit Information</h4><div class=\"six columns\">".   
    "<h5>Parking Map</h5><iframe width=\"420\" height=\"420\" frameborder=\"0\" ".   
    "style=\"border:0\" src=\"https://www.google.com/maps/embed/v1/search".   
    "?q=parking+near+680+Folsom+St.+San+Francisco,+CA+94107&key=YOU_KEY_HERE\"></iframe>"
    "</div><div class=\"six columns\"><h5>Transit Stop's</h5><iframe width=\"420\" "
    "height=\"420\" frameborder=\"0\" style=\"border:0\" "
    "680+Folsom+St.+San+Francisco,+CA+94107&center=37.784465%2C-122.398570&zoom=14"
    "&key=YOUR_KEY_HERE\"></iframe></div><!-- TAB 2 Content (Office Locations) -->" ) );

     

    parking after.JPG.jpg

Contributors