Javascript array of custom Fields

Question

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

Answer 1

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:

• Google Maps
• GMaps as well as Gmaps Fieldtype
• MX Google Maps
• Maps
• Mapper