show map multiple pin and save

index.page



<div id="map"  style="width: 96%; height: 400px; text-align: center;" ></div>

</div>
<br><br><br><br><br><br>



<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk&libraries=places"></script>
<script>$(document).ready(function(){




static


  // var locations =  [["cdcdc","25.902391","78.570356"],["new title","42.838148","-80.473317"],["dada","25.902391","78.570356"],["dadasd a d","25.720813","76.19997"],["DElhi","26.106121","78.271666"],["Gwalior","26.106121","78.271666"],["new title","25.902391","78.570356"],["title1","42.838148","-80.473317"],["new title","28.626726","77.304831"]];
end

start daynemic


  var locations = <%= raw @map_data.to_json %>;
  console.log("Data", locations)
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(25.902391, 78.570356),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][2], locations[i][3]),
      map: map
    });
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        console.log("Title", locations[i][1])
        infowindow.setContent(locations[i][0], locations[i][1]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  });




note... var locations = <%= raw @map_data.to_json %>; this is a controller method index.... @map_data = @events.map{|e| [ e.address, e.title, e.latitude, e.longitude]} and save