Maps solutions for EE

Question

I run a website (walkiees.co.uk) that lists dog walks. The site runs by users adding dog walks to the site via a safecracker form.

I have a MX Google Maps field, which the user uses in the safecracker form to mark where a walk is.

This works OK, but I am getting a bit stuck when using the maps data on the site.

After the recent release, I am starting to look at Objective HTMLs Google Maps add-on, as it is certainly feature rich.

What I want to know is:

• Can I export the data (long/lat) from the MX google maps field, to another add-on (Objective HTMLs).

• How can I display all entries on a single map, with links through to the single entry.

Thanks

Answer 1

Can I export the data (long/lat) from the MX google maps field, to another add-on (Objective HTMLs).

You can't really convert the data exactly, but as long as the lat/lng values are stored in individual channel fields in each entry you are do it. The one thing MX Google Maps does that my add-on doesn't do currently is searching entries with multiple locations (without lat/lng fields).

Essentially, MX Google Maps stores an index of these coordinates. My add-on was never structured this way. However, this capability will likely come in some form in the future. For now though, simply structuring your data for 1 marker per entry will work fine.

Example: https://objectivehtml.com/google-maps/examples/search

How can I display all entries on a single map, with links through to the single entry.

This is relatively easy. You can use the exp:gmap:marker tag or the fieldtype tag, whichever you use to setup your entries. Basically use the marker tag if you don't use the FT.

Here is using the exp:gmap:marker tag.

{exp:channel:entries}

    {exp:gmap:marker id="map" latitude="{your_lat_field}" longitude="{your_lng_field" geocode="false"}
        <a href="/some/path/{url_title}">{title}</a>
    {/exp:gmap:marker} 

{/exp:channel:entries}

Or here is how to use the fieldtype tag.

{exp:channel:entries}

    {your_map_field id="map"}
        <a href="/some/path/{url_title}">{title}</a>
    {/your_map_field} 

{/exp:channel:entries}

Additional Links

• https://objectivehtml.com/google-maps/documentation/tag/marker
• https://objectivehtml.com/google-maps/examples/markers-from-channel-data

Answer 2

Objective's Google Maps does take decimal longitude and latitude, so you should be able to import than easily from MX Maps (which I'm sure uses similar).

This is how you would show a map with multiple items. PS the examples are pretty good here.

{exp:gmap:init id="map" style="width:290px;height:250px;border: 5px solid #f1f1f1;"}

{exp:channel:entries channel="dogwalks"}
    {exp:gmap:marker id="map" latitude="{cf_general_latitude}" longitude="{cf_general_longitude}" open_windows="false" geocode="false" zoom="3"}
        <p><strong>{title}</strong></p>
        <a href="{title_permalink='dogwalks/entry'}">View walk</a>
    {/exp:gmap:marker}
{/exp:channel:entries}

Answer 3

Shorn. We are using Objective HTML Google Maps for the same solution as you're looking for in your second question "How can I display all entries on a single map, with links through to the single entry."

We have the following functionality:

1. Map with each single entry indicated by a marker
2. Click a single entry marker to display an info box with single entry title and details
3. Single entry title in the info box links through to the single entry

Our template code is below. I'm sure an expert would be able to trim it down but it is at least working. Note the last line of code, I found that each marker reset the centre point of the map whatever method I used to initially define it in the {exp:gmap:init} tag. My solution was the final {exp:gmap:center} tag to define the map centre after all markers have been loaded.

{exp:gmap:init id="map1" scrollwheel="false" zoom="9" map_type="google.maps.MapTypeId.TERRAIN"}

{exp:channel:entries channel="{embed:channels}" disable="member_data|pagination|category_fields" url_title="not {embed:url_title}"}
  {location-map id="map1" parse="markers"}
    {exp:gmap:marker
      id="map1"
      extend_bounds="false"
      icon="/themes/third_party/interactive-map/interactive-map-marker.png"
      show_one_window="true"
      style="width: '200px'"
      latitude="{latitude}"
      longitude="{longitude}"
      infobox="true"
      offsetY="-39"
      offsetX="-3"
      class="ui-infobox-dark"
      category="{categories backspace="1"}{category_url_title}|{/categories}"
      geocode="false"
    }

      <div class="ui-infobox-content">
        <h3><a href="{segment_1}/{url_title}">{title}</a></h3>
          <p>
            {markers}
               {marker:formatted_address}
            {/markers}
          </p>
        </div>

    {/exp:gmap:marker}    
  {/location-map}
{/exp:channel:entries}

{exp:gmap:center id="map1" latitude="51.2469449" longitude="0.7"}

Answer 4

I'll shed a little light on showing all markers. I've done something pretty similar to this, but I was using Google Maps API v2 and EE1, but fundamentally should be the same.

The best way to do this is to map all the markers to a XML template so Google can read and plot the markers. Create new xml template in EE and add this:

<markers>
{exp:channel:entries channel="locations" disable="trackbacks|comments|pagination|member_data" status="Open"}
<marker lat="{google_map}{latitude}" lng="{longitude}{/google_map}" label="{title}" >
<infowindow><![CDATA[  <div class="bubble"> _whatever_ </div> ]]></infowindow>
</marker>
{/exp:channel:entries}
</markers>

Then, create a new template that will display the map, read the xml file and plot the markers. Be sure to update the URL to the XML file

<div id="map" style="height: 350px"></div>
<noscript>
    <b>JavaScript must be enabled in order for you to use Google Maps.</b> 
        However, it seems JavaScript is either disabled or not supported by your browser. 
        To view Google Maps, enable JavaScript by changing your browser options, and then 
        try again.
</noscript>

<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    // A function to create the marker and set up the event window
    function createMarker(point,name,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });

    // create the map
    var map = new GMap2(document.getElementById("map"));
    //map.addControl(new GLargeMapControl());
    //map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(39.962598,-76.727745), 10);
    map.setUIToDefault();

    // Read the data from example.xml
    GDownloadUrl("http://domain.com/path/to/xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var label = markers[i].getAttribute("label");

            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
        }
    });
} else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>

Again, this is specific to Maps API v2, but with a little tweaking it should come to life.