Skip navigation

Currently Being Moderated

Embed static Web App item maps using the Google Static Maps API

Mar 15, 2012 9:34 PM

Using the Google Static Maps API, you can easily implement static maps in the detailed view of your Web App items - without having to generate an API key.

To embed a static map, simply insert the following code in the "Detail Layout" of your Web App while in HTML mode.


<div id="google-static-map"><div><img id="gmap" alt="gmap" src="\&markers=size:mid|color:red|{tag_address1}+{tag_addresscity}+{tag_addressstate}+{tag_addresscountry}&sensor=false"/></div>
<span onclick="javascript:document.getElementById('gmap').src='\&markers=size:mid|color:red|{tag_address1}+{tag_addresscity}+{tag_addressstate}+{tag_addresscountry}&sensor=false';">Map</span> | 
<span onclick="javascript:document.getElementById('gmap').src='\&markers=size:mid|color:red|{tag_address1}+{tag_addresscity}+{tag_addressstate}+{tag_addresscountry}&sensor=false';">Satellite</span></div>



Now ensure that you enable the maps feature by selecting your Web app and then clicking Edit Web App Settings:


Then selecting the Allow proximity search box and then clicking Save.



The last step is to add the addresses to your Web App items by selecting a web app item and expanding the Item Address section:



Tip: you can also add the web app item addresses by doing a web app import.



Comments (6)