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

    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="http://maps.google.com/maps/api/staticmap?size=400x400&maptype=roadmap\&markers=size:mid|color:red|{tag_address1}+{tag_addresscity}+{tag_addressstate}+{tag_addresscountry}&sensor=false"/></div>
    <span onclick="javascript:document.getElementById('gmap').src='http://maps.google.com/maps/api/staticmap?size=400x400&maptype=roadmap\&markers=size:mid|color:red|{tag_address1}+{tag_addresscity}+{tag_addressstate}+{tag_addresscountry}&sensor=false';">Map</span> | 
    <span onclick="javascript:document.getElementById('gmap').src='http://maps.google.com/maps/api/staticmap?size=400x400&maptype=hybrid\&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:

    edit-web-app.png

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

    proximity-search.png

     

    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:

    item_address.png

     

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