Create Google Map

Inserting dynamic Google maps requires a few steps but once done is a powerful way to show clients dynamic maps that are also click trackable and fully manageable from the Boingnet application

    1. Google requires all sites displaying their maps to be registered. You can get an API key for your domain by visiting http://code.google.com/apis/maps/signup.html

    2. Once you have an API key from Google, edit the Boingnet template you wish to insert the map for. 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

    3. Copy/Paste the following Javascript code at the bottom of your template. You need to replace <API KEY> with the API Key you got from Google

    <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=<API KEY>”></script>

    4. Copy/Paste the following Javascript code after the one above

    <script src=”/js/bn_googlemap.js”></script>
    <script type=”text/javascript”>
    showAddress(‘%First Name%;%Phone%;%Address%;%City%;%State%;%Zip%’,%Variable Data 34%);
    </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