googleMap snippet

googleMap output modifier/snippet

DESCRIPTION

This output modifier accepts an address and returns a url for the static map image

PARAMETERS:
w - default: 435
h - default: 300
z - default: 16
sensor (1 or 0) - default: 0
marker (1 or 0) - default: 1
key - Google Maps API v3 Key, note that static maps must be enabled

OUTPUT MODIFIER USAGE:
<img src="[[*tvAddress:googleMap=`w=425,h=300,z=16,key=xxxxxxxxxxx,sensor=0,marker=1`]]" />

SNIPPET USAGE:
<img src="[[googleMap? &address=`[[*tvAddress]]` &key=`xxxxxxxxxxx` &w=`425` &h=`300` &z=`16` &marker=`1` &sensor=`0`]]" />

`key` is the only REQUIRED variable, unless you manually create a system setting named `google_api_key` then the snippet will use that value whenever a vlaue for 'key' is not passed

Very neat! Is there a way to do this with embed map? Would be very nice to use my address TV that is already on my resource to embed a map for the location, rather than venturing out to google, marking the address and grabbing the custom code to embed.

With this static map snippet — if someone were to click the static map—would it bring it up in the mobile app for obtaining, route, street view, etc.

Hmm, here's how we're doing it. Take a look at the footer of our website https://dashmedia.com.au/

We're using the googleMap output modifier on a TV containing the address to generate a static map and then asynchronously replacing the static map with a live embed map after page load using a script we've published on GitHub https://github.com/DashMedia/google-map/ it's in CoffeeScript so you'll need to pre-process it down to regular JS.

In the end the template markup looks something like:



The script uses the data-address attribute to inject an embedded map into the div#large_map.

Then you can use CSS media queries to show the right map for each situation.

@mmcgee: There is StoreLocator (http://rtfm.modx.com/extras/revo/storelocator) out there, that does a lot of your needs.