Lucid has an Action available to easily insert a Google Map onto your page. Before you start with Google Maps, Google requires that you get a developer key. Once you have this key, you can choose 'Google Map' from the 'Google' menu at the to of the Lucid window to insert Google Map code into your Javascript. Google Maps requires a code import from Google, you can have Lucid do this for you by double-clicking the Google Map action, and pressing 'Insert Script Header'. Lucid will then request the Goole API Key that you requested from Google. Please note that without a valid key, Google Maps will not work, it needs to be your own key, placeholder text will not work.
Once you have inserted the script header, along with the key, you can enter Latitude and Longitude details into the Google Map, or alternatively choose one of the locations from the gear menu on the top left of the Google Map editing window.
Finally, you need to drag from the little circle on the right of the Google Map action to a div on the page where you want the Google Map to appear.
In the Google Map action, you may choose a variable to store a reference to the map. This reference can be used elsewhere to modify the map. For example, you may wish to update the location of the map from an AJAX call or a button press. If you want to do this, you should use a global variable, set up in the 'Setup' sheet. A global variable may be accessed from anywhere, so your AJAX code, or any code can easily access it. If your global variable was called 'mymap', you would simply enter mymap
in the variable field. If you are not interested in modifying the map from elsewhere, you may define a new variable, which will not be used anywhere, but should be created anyway. To do this, use var mymap
which defines the new variable using 'var'. If you intend to pass the map onto another action to be changed, then you may also use an event property. To use an event property enter event.mymap
. This means that the function you call after the map will be able to access the map use the property 'mymap' in the event object, i.e. event.mymap
.