Skip navigation

Do It

1 Post authored by: Scott Winterton-Oracle

If you're reading this, you're likely aware of the benefits Marketing Automation has to offer for Event Management in terms of better attendance and a more engaged audience.  Today we'll be looking at how you can improve engagement even further by providing something of immediate value as soon as your client registers for your event:  an answer to the questions, where will I stay, or what will I do when I get there?  The answer to the question?  Provide Google Places integration directly on your landing page.

 

form.png

 

The Setting

 

In this scenario, you'll want to save the event location to the Contact profile through your registration form.  In my example, I created a custom field called Event_Location.  I pre-loaded my event locations using a picklist on the form, so that the address to the venue is stored as the value for the picklist item, while only the city and state display as the name.  Then I mapped the picklist's value to the contact's Event_Location field.  Once they submit the form, they are redirected to the confirmation landing page.

 

The Confirmation Page

 

When you build your confirmation page, you'll want to add a few code elements to your page, in order to display your places of interest.  This is as geeky as I'm going to get.  I promise.

 

To make things easy and re-usable, I saved my Google Places API page as a template, with the geeky elements already embedded.  As a result, once you've set up the template, you can re-use this ad-infinitum without having to write a single line of code.

 

First, you'll want to click the Tools icon in the left hand side of the Landing Page Editor.  We're going to make a few modifications to the Page Snippet Tools by clicking on the right-most icon in the Toolbox.  Once you've located the Page Snippet Tools, you'l notice three options at the bottom:  Head, CSS and JS.  For the purpose of this exercise, we'll modify the CSS and JS sections.

 

CSS

 

The CSS section will allow your page to control the appearance of the map.  In this instance I used white for the map background.  You can change the background color, if desired, by changing the background-color value.  You can find a list of HTML colors here.  You can also change the map's height and width by changing their respective values as well.

 

<style>

      #map {

        background-color:#fff;

        height: 200px;

        width: 300px;

        border: 1px solid #333;

        margin-top: 0.6em;

      }

    </style>

 

JS

 

OK, so here's where the geekiest part comes in.  We need to tell the page to call the Google Places API and populate our map.  Most of the code will remain as is, you will want to change the value in the "<span class="eloquaemail">Event_Location_for_GM_API1</span>" section to match your own merge field.  If you want to search for something other than hotels, you'll also want to change the types: ['lodging'] line to match your preferences.  You can select more than one if you wish, just put separate them by commas between the brackets.  Common place types include airport, grocery_or_supermarket, lodging, night_club, parking or restaurant.

 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script><script type="text/javascript">

        var map;

        var infowindow;

        var geocoder;

        function initialize() {

      

        geocoder = new google.maps.Geocoder();

 

            var address = "<span class="eloquaemail">Event_Location_for_GM_API1</span>"

          

            geocoder.geocode({ 'address': address }, function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {

                    //                    map.setCenter(results[0].geometry.location);

                    map = new google.maps.Map(document.getElementById('map'), {

                        mapTypeId: google.maps.MapTypeId.ROADMAP,

                        center: results[0].geometry.location,

                        zoom: 15

                    });

                    var request = {

                        location: results[0].geometry.location,

                        radius: 500,

                        types: ['lodging']

                    };

                    infowindow = new google.maps.InfoWindow();

                    var service = new google.maps.places.PlacesService(map);

                    service.search(request, callback);

               

                    var marker = new google.maps.Marker({

                        map: map,

                        position: results[0].geometry.location

                    });

                } else {

                    alert('Geocode was not successful for the following reason: ' + status);

                }

            });

        }

 

        function callback(results, status) {

            if (status == google.maps.places.PlacesServiceStatus.OK) {

                for (var i = 0; i < results.length; i++) {

                    createMarker(results[i]);

                }

            }

        }

 

        function createMarker(place) {

            var placeLoc = place.geometry.location;

            var marker = new google.maps.Marker({

                map: map,

                position: place.geometry.location,

                title: place.name

            });

 

            google.maps.event.addListener(marker, 'click', function () {

                infowindow.setContent(place.name);

                infowindow.open(map, this);

            });

        }

 

        google.maps.event.addDomListener(window, 'load', initialize);

 

    </script>

 

The Map

 

Once you've updated the Page Snippet Tools, your page has almost everything it needs to display the places of interest.  There's just one more detail left: putting the map's placeholder on your page.  To do this, simply add a text box to your page, right click and choose Edit Source.  Once you've done that, place the following text in the source editor:

 

<div id="map"> </div>

 

...and that's it!  As a finishing touch, be sure to size your text box to match the size you specified in the CSS setting (or set it to 200px high x 300px wide, if you haven't changed the setting).  The end result should look something like the photo below.  I hope you've found this helpful and interesting.  Please feel free to post your questions or comments!

 

hipsterlp.png

Filter Blog

By date: By tag: