Question

I am on ruby and set a map on the page. I can add markers upon initialization, but what i would like is to loop through my @events and find the longitude and latitude fields and do something like this

<% @event.each do |event|%>
  <script type="text/javascript">
    var long = <%= event.longitude %>;
    var lati = <%= event.latitude %>;
    addMarker(long, lati);
  </script>
<% end %>

I am not familiar with google api, but was hoping if it was possible.

Here what I have in term of building the map api

function initialize() 
{
    var lat, lon, map, myOptions;
    //check if user has geo feature
    if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(
    //get position

    function(position){
        lat = position.coords.latitude;
        lon = position.coords.longitude;

        //init map
        myOptions = {
           center: new google.maps.LatLng(lat, lon),
           zoom: 8,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            var myLatlng = new google.maps.LatLng(46.4352,-80.9455);
    var marker = new google.maps.Marker({
        position: myLatlng,
        title:"Hello World!"
    });
    // To add the marker to the map, call setMap();
    marker.setMap(map);
    },
    // if there was an error
    function(error){
        alert('ouch');
    });
    }
    //case the users browser doesn't support geolocations
    else 
    {
        alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
    }
}

Answer 1

Here’s my suggestion:

<script type="text/javascript">

  function addMarker(lat, lng) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });
  }

  <% @events.each do |event| %>
    addMarker(<%= event.latitude %>, <%= event.longitude %>);
  <% end %>

</script>

Create an addMarker function (if it doesn’t already exist) that takes two arguments — latitude and longitude — and adds a corresponding marker to the existing map. Then, you can use Ruby to create one call to addMarker per @event.

There are ways to optimize this further. For example, you could have a separate Ruby script that outputs the coordinates as JSON, and use asynchronous HTTP request (aka Ajax) to load the coordinates into an array at runtime, which you could then use to populate the map.