Custom event listeners with Google Maps For ExpressionEngine field type

Question

I need to add a custom event listener (to trigger a modal window) to a Google Map that is generated and managed using Google Maps for ExpressionEngine. To this end I'd like to output my own Javascript using values from the field but not the marker scripts injected by the add-on.

Is there a simple way (using EE tags) to get individual bits of data, say, the formatted address, latitude or longitude, from a Google Maps for ExpressionEngine field?

For instance, I have a GMap4EE field named conf_map - this is storing JSON data retrieved from Google Maps.

Now, on my template if I used the field tag {conf_map id="map"} it would do what it's supposed to and create a map marker on the map with the id of "map". However can I use something like {conf_map:latitude} to get the latitude of the marker?

I know I can create additional fields and have the add-on store latitude and longitude data in there when I save an entry but since I will also want address data, icon data etc. it would seem like I need to directly access the json data. I was hoping to avoid having to make some kind of parser for the data since I think that's a bit beyond me!

Answer 1

I've just discovered the parse paramter which will let me get the bits of data I need to create my own javascript for creating markers an modal windows.

https://www.objectivehtml.com/google-maps/fieldtype

Use it like so...

{exp:channel:entries channel="conf"}
    {conf_map parse="markers"}
        {markers}
            {marker:latitude}, {marker:longitude}
        {/markers}
    {/conf_map}
{/exp:channel:entries}

UPDATE: I've got this working now so here's my solution in case anyone else might need to do a similar thing.

Note: This site is using Foundation Reveal to create modal popovers.

Basically what I did was use the markers tag pair to loop through each marker in the field and output it's own bit of javascript to generate a map marker and attach an event listener which triggered a modal.

To make life easy, each run through the loop also creates a block of modal HTML which gets shown when the marker is clicked. Less efficient but easier than trying to pass data into the modal.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&amp;key=&amp;language=en"></script>

<div id="map" class="" style="width:100%;height:400px"></div>

<!-- First create the map itself -->

        <script type="text/javascript">

            google.maps.visualRefresh = true;

            var map_options             = {zoom: 12, center: new google.maps.LatLng(0,0), mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false};
            var map_canvas              = document.getElementById("map");
            var map_map                 = new google.maps.Map(map_canvas, map_options);
            var map_bounds              = new google.maps.LatLngBounds();
            var map_markers             = [];
            var map_window              = {};
            var map_windows             = [];
            var map_responses           = [];
            var map_html                = [];
            var map_waypoints           = [];
            var map_regions             = [];
            var map_geocoder            = new google.maps.Geocoder();
            var map_directionsService   = new google.maps.DirectionsService();
            var map_directionsDisplay   = new google.maps.DirectionsRenderer({map: map_map});
            var map_clusterOptions      = {maxZoom: 0, gridSize: 0, styles:[]};
            var map_cluster             = new MarkerClusterer(map_map, map_markers, map_clusterOptions);

        </script>


<!-- Now create the markers
     All marker data is stored within the GMap4EE field type in a single entry
     So we first grab the entry, then output the field and within that use the {markers} tag pair to loop through each one and create the Javascript needed
-->


{exp:channel:entries channel="conference"disable="member_data|pagination|categories|category_fields"}

    {conference-venue-map parse="markers"}

        {markers}
            <!-- Create a marker on the map -->
            <script type="text/javascript">
                var index = map_markers.length;
                map_markers[index] = new google.maps.Marker({
                    map: map_map, 
                    position: new google.maps.LatLng({marker:latitude},{marker:longitude}), 
                    icon: "{marker:icon}"
                });

                map_markers[index].entry_id = {embed:entry};
                map_markers[index].index = {marker:count};
                map_bounds.extend(new google.maps.LatLng({marker:latitude},{marker:longitude}));

                if (index > 0) {
                    map_map.fitBounds(map_bounds);
                } else {
                    map_map.setCenter(map_bounds.getCenter());
                    map_map.setZoom(map_options.zoom);
                }
                        (function () {
                            var obj = map_markers[index];
                            google.maps.event.addListener(obj, 'click', function(e) {
                                var modal = '#markermodal'+obj.index;
                                $(modal).foundation('reveal','open');
                            });


                        })();

                </script>

    <!-- Create a modal window for this marker -->

                <div id="markermodal{marker:count}" class="reveal-modal small">
                    <h1>{marker:title}</h1>
                    <p>{marker:formatted_address}</p>

                    {marker:content}
                    <a class="close-reveal-modal">&#215;</a>
                </div>

        {/markers}
    {/conference-venue-map}
{/exp:channel:entries}