Google Maps are ubiquitous, and they have become an expected way to direct people to locations around the web. Boingnet offers you two ways to insert a Google Map into your landing page templates to suit your needs – a basic method and an advanced method. The basic method is very quick and easy to follow, while the advanced method allows you to dynamically insert a Google Map based on variable data. Either way, inserting a Google Map into your template requires a few steps, but once done is a powerful way to show clients maps that are also click track-able and fully manageable from the Boingnet application.
Boingnet’s Simple Method to Insert A Google Map into a Template:
- Go to the main navigation bar and select Templates.
- Find the template you wish to edit and click the Edit button.
- Select the area of your template where you’d like the Google Map to appear.
- Click the source button to reveal the source code.
Next, open a new tab in your browser and go to Google Maps:
- Ensure that the map you’d like to display on your template appears in the current map display.
- Click the settings gear icon in the bottom right of screen.
- Click Share and embed map in the window that pops up.
- In the box that appears, make sure the Embed map tab is selected.
- Choose the embed size you want (Large, Medium, Small, Custom).
- Copy the HTML code that appears in the box starting with <iframe itemprop="image" src.
- Paste the HTML code into the source code of your template and click green OK button.
- Click Save to save changes to your template.
Keep in mind that traffic information and some other Map features may not be available in the embedded map.
Boingnet’s Advanced Method for Inserting a Google Map into a Template:
This advanced method allows you to insert a Google Map dynamically using variable data.
2. Once you have an API key from Google, edit the Boingnet template in which you wish to insert the map. You must first create a location on the page using a specially named <div> tag. Here is a sample <div> container for a Google Map:
<div style=”width: 395px; height: 328px;” id=”map_canvas”></div>
Paste this code into your ‘source’ HTML and adjust the size as needed.
<script itemprop="image" src=”http://maps.google.com/maps?file=api&v=2&key=<API KEY>”></script>
5. The showAddress function requires the data to be in the format
showAddress(‘Name;Phone;Address;City;State;Zip’, Zoom Factor);
You can hard code these values if you want or let them be read from whatever variable fields you want. Zoom factor is a number from 17 (fully zoomed out) to 0 (maximum definition).
6. All clicks on pinpoints will be tracked. In addition, a Get Directions link is presented in each popup. That link is also trackable. The results of map and directions clicks can then be viewed under the ‘Click Report’ in the pURL reports section.
More more information about inserting images into Boingnet templates, see our Insert an Image page.