5

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

  • Perhaps it's just me, but this question feels overwhelming after reading it. You may might consider asking one succinct question at a time. My two cents... – Anna_MediaGirl Dec 6 '12 at 18:30
  • Sorry, yea, I got carried away! :) – shorn Dec 6 '12 at 18:40
  • Agreed, not a question. I'd recommend editing it and asking a specific question or series of questions in bulleted format. – CreateSean Dec 6 '12 at 18:52
  • Right, edited it down to a bit more defined questions. – shorn Dec 6 '12 at 19:33
  • I'd also recommend linking to the add-on you are talking about for clarity's sake. – UltraBob Dec 7 '12 at 0:36
3

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

| improve this answer | |
  • Thanks for this. Unfortunately MX google maps does not store the lat/long data within channel fields. It does store the data, and it's accessible within the MX Google maps tag pair, using {longitude} & {latitude} I can also see all the data in the database, so I might just have to bite the bullet, create a couple of fields and manually copy the data over. Displaying the entries on a single map looks fairly straightforward then. SO just adding the link to the entry in there will show in the infowindow, that's great. – shorn Dec 7 '12 at 8:20
4

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}
| improve this answer | |
1

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"}
| improve this answer | |
  • This template code is not really optimal. There is no reason to use the FT tagpair with parse parameter. Everything you want to accomplish can be done using only the FT tag, so no exp:gmap:marker tag needed. While your logic works, and I made sure it did when I building this stuff, but it's a little redundant. Just wanted to add this disclaimer to others than may be looking for possible solutions. – Justin Kimbrell Dec 8 '12 at 23:31
  • Hi Justin, I don't dispute that the code could be reduced and I did make that point above. The OP wants to do almost exactly the same as us, it took us days of pain to find the solution above (I'm not criticising your add on here, which is great) and while not optimal, the code above works so I thought I'd share. – Martin Jewiss Dec 23 '12 at 18:12
0

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.

| improve this answer | |
  • Thanks for adding this, but I am really looking at utilising an add-on for this. I'm afraid that my js skills aren't up to much! – shorn Dec 7 '12 at 8:21
  • This code really doesn't do anything for Google Maps for EE, as it uses Google Maps API v3. While it's likely solid code, it doesn't do much to help answer the question. – Justin Kimbrell Dec 8 '12 at 23:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.