Display a static map using an Address field and Google Maps

Google Static Maps API can be used to display an image of a map instead of a fully interactive map. This is great if you want to display a thumbnail map in a list of results, because the full interactive map isn’t necessary. Your page will appear to load faster, since fewer assets need to be loaded. Be sure to enable the Static Maps API for your API key – this is a separate API that must be enabled in the Google API Console.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=[types field='address-field-slug' output='raw'][/types]&amp;zoom=13&amp;size=300x150&amp;maptype=roadmap&amp;markers=color:red&amp;key=YOURAPIKEY" />

 

Change the address-field-slug to match your address field. If your site isn’t https, change the protocol. You can also change the zoom and size parameters to fit your needs. Other customization can be added as well, you can review the full API documentation here:
https://developers.google.com/maps/documentation/maps-static/intro


Let us know if this snippet is not working for you:

This snippet doesn’t work
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments