You are here

Embedding Google Maps

Submitted by Jerimee on May 30, 2012 - 4:28pm

Adding a Google Map into a site is a useful way to show a geographic area in an accessible format. Google Map's interface provides a link to create a code to the left of the map in the browser and includes a link to a menu that allows the user to adjust how the embedded map will appear, its size, and includes the url to add the map to the site dependent on those variables.Google provides additional explanation of the embedding tool that can be found here.

The map is defined by a set of parameters in the URL that define the location of the map and basic display settings that can be manipulated to slightly adjust the map output within the page. The adjustable variables include the type of map displayed (normal, satellite, hybrid or terrain), the zoom level, and the latitude and longitude of the center of the map. A good overview of these variables can be found here. An example of the code can be found here:

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?f=q
&amp;source=s_q
&amp;hl=en
&amp;geocode=
&amp;q=raleigh,+nc
&amp;aq=
&amp;sll=37.0625,-95.677068
&amp;sspn=59.249168,126.5625
&amp;t=m
&amp;ie=UTF8
&amp;hq=
&amp;hnear=Raleigh,+Wake,+North+Carolina
&amp;ll=35.782171,-78.656616
&amp;spn=0.066845,0.109863
&amp;z=13
&amp;iwloc=A
&amp;output=embed">
</iframe>

That code refers to a map that looks like this:

If we wanted the map to not be as tall, to span the entire width of the column, to remove the callout box for Raleigh, zoom out, and make the map a satellite hybrid, we could adjust in the code as follows:

  1. <iframe width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
    src="https://maps.google.com/maps?f=q
    &amp;source=s_q
    &amp;hl=en
    &amp;geocode=
    &amp;q=raleigh,+nc
    &amp;aq=
    &amp;sll=37.0625,-95.677068
    &amp;sspn=59.249168,126.5625
    &amp;t=h
    &amp;ie=UTF8
    &amp;hq=
    &amp;hnear=Raleigh,+Wake,+North+Carolina
    &amp;ll=35.782171,-78.656616
    &amp;spn=0.066845,0.109863
    &amp;z=10
    &amp;iwloc=
    &amp;output=embed">
    </iframe>

Which looks like this:

To summarize what changed, The iframe width and height were adjusted, the t (type of map) parameter was changed from m (map) to h (hybrid),the z (zoom) parameter was changed from 13 to 10, and a specification for the parameter of iwloc was changed from A to null (to remove the call out box, an explanation can be found here.

It is important to note that url manipulations are limited (and can we funky). The url is provided by the Google Maps tool and can include several parameters which do not have values. Nonetheless, they provide some control over the embedded map. For advanced manipulation of the map, knowledge of the Google Maps API is required and will allow more in depth modification of embedded maps. Some commonly thought of items that can only be tackled with advanced API programming include removal of standard Google features (such as the map type selector) and addition of a legend. Even without these tools, however, a basic understanding of the process behind embedding a Google Map into your site will enhance the user experience.

Inserting a Google Map requires additional steps in NationBuilder when compared to other media. While entities like Youtube and Flickr automatically populate, simply adding a link to your map is not sufficient to embed the map. Adding Google's provided code to the NationBuilder content block, even the html version, does not embed the map properly. Instead, adding a map requires modifications to the page's template. The Google generated code can be inserted above or below the content box in the template file. A tab for the template can be found to the right of the content tab. In the template, the content box is denoted as {{ page.basic.content }}. Inserting the code generated by Google Maps embed tool directly above or below that code above in the template will provide the basic map required for most NationBuilder applications.