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

[mario_gudelj]

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:

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.

[StudioBQ]

Hi - this is very exciting to come across...but can you give a little more specific info about the last two points?

I have the code added and a map is appearing in my Detail layout...but where, exactly, do I locate the 2nd and 3rd items above?

Thank you for your guidance.

[Daniel_Gundi]

Hi StudioBQ,

The admin UI has changed slightly since this document was initially written.

I have updated the steps, please take a look and let me know if anything is unclear.

Cheers,

Danny

[StudioBQ]

Yes! Very helpful - thank you very, very much!

[M__Henriksen]

Can I use this instead of the key in web apps search results on a map: I've a web app on stores, and I want to show all the locations on a map at list wiew. But the map only shows the ocean outside Africa. If I zoom out until I find Norway, I can see that the locations are marked. But BC tells me that the reason for the location in the ocean is because the zipcode is not in the database. I guess we're talking about BC database, because I know that it is in the Google database. So to get this working I have to send inn all the adresses to BC so that they can register them into their database. I can't quite see how this will work in the end. Because I don't know which zipcodes my clients will use when registering more stores / locations, and none of us will know which zipcodes the end-user will type when searching for nearby locations.  So - I'm looking for a way to make this work.

[mario_gudelj]

If your client is going to be adding more stores you may want to look into using Google for geocoding the address into long and lat as you will probably have to contact BC support and provide alt and long for every new store.

I guess you need LatLng class to geocode your addresses into lat and long before plotting them - https://developers.google.com/maps/documentation/javascript/reference?hl=sv-SE#LatLng

Also, take a look at some other posts about google maps and web apps. One of the partners has developed an easy to use API for google maps.

Cheers,

-mario

[mario_gudelj]

found it http://www.bcmapapp.com/apps/map/index.html