1

I have a custom CSV field for coordinates {map_coordinates} (e.g., "47.262223,-122.451725") and would like to loop through each entry and plot those coordinates onto a maps (using the Google Maps A:PI v3) as well as add listeners to each.

function initialize() {

  var map;

  /* this works. It gets the most recent entry and if you use a marker it plots it
     just fine. It's when dealing with multiple markers (vis., no 'limit' on returning
     entries) that it negates to plot anything and breaks (the map doesn't even show). */
  {exp:channel:entries channel="maps_channel" limit="1"}
    /* {map_coordinates} is the custom field */
    var mLatLng = new google.maps.LatLng({map_coordinates});
    map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: mLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 13
    });
  {/exp:channel:entries}

It's this lower section ( the one to plot all of the coords for the map) that I'm having trouble with. Ideally the upper and lower section should be integrated, but for the time-being I'm just trying to get it to work :p

  /* Create an array with the size of the total entries in the channel */
  var articles = new Array({total_results});
  var marker, i;

  /* add markers for each article 
     add listeners for each article */

  for (i = 0; i < articles.length; i++) {
    marker = new google.maps.Marker({
      /* get the {map_coordinates} at the current 
         index 'i' and plot them with a new marker. 
         the code 'position: articles[i]{map_coordinates} doesn't 
          work and I didn't expect it to; I'm including it to show 
          exactly what I need done.*/
      position: articles[i]{map_coordinates},
      map: map
    });
  }
}

As you would be well to assume I am new to EE and somewhat new to JS.

I've been using the following resources to try and remedy this:

http://net.tutsplus.com/tutorials/cmss/creating-a-google-map-with-expressionengine/

https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example

2

Try This...

function initialize() {
  var map, marker, pos;
  {exp:channel:entries channel="maps_channel"}
    {if count == 1}
      var mLatLng = new google.maps.LatLng({map_coordinates});
      map = new google.maps.Map(document.getElementById("map-canvas"), {
        center: mLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 13
      });
    {/if}

    pos = new google.maps.LatLng({map_coordinates});
    marker = new google.maps.Marker({
        position: pos,
        title: "{title}",
        map: map
    });
  {/exp:channel:entries}
}

Note: I've also added title just to show it's possible.

You might also want to consider one of these instead:

| improve this answer | |
  • Thank you very much for your response. With your logic I was able to get it working. For some reason {if} statements aren't working correctly on my distribution (though I have no idea why ATM). What I did to circumvent having to use an IF statement was move the map out of the channel loop. Thanks again. We've been working on this for a day now and it's a great relief to be able to move on. Because I don't have enough 'reputation' I can't post my own answer but here's a link to the final edit – adamellsworth Aug 22 '13 at 20:42
  • EE has trouble parsing tags and conditionals within JS because of the protect_javascript config variable. If you set this to 'no' it should work. This is what I do in Google Maps for EE to get the conditionals to work. – Justin Kimbrell Aug 23 '13 at 2:32

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.