Show Markers on Google Maps Dynamically -Rails 3.2

Show markers on google maps dynamically -Rails 3.2

well after struggling with jquery arrays and json ,i was able to find this best solution...this is working in all scenarios and all i need is to handle empty and null conditions,which i already did and its working the way i needed.HOPE THIS HELPS SOMEONE

my controller

def show_nearby_locations

  @nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km)
  @nearbys.first(10)

end

in my view file

<%= javascript_tag do%>
 window.nearbys= <%=raw @nearbys.to_json %>;

<%end%>

this is my script inside view

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions);
    map.setTilt(45);            

    var markers=[];
    var infoWindowContent=[];
    $.each(nearbys, function(index) { 

        console.log( data[0][index].latitude,data[0][index].longitude );
        markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]);
        infoWindowContent.push(['<div class="info_content" >' +
        '<h3 style="color: rgb(<%= rand(0..200)%>,<%= rand(0..200)%> ,<%= rand(0..200)%>);">'+nearbys[index]['title']+'</h3>' +'</br>'+
        '<p>'+nearbys[index]['about']+'</p>' +       
         '</div>']);

        });   

       // Display multiple markers on a map
       var infoWindow = new google.maps.InfoWindow(), marker, i;        
      // Loop through our array of markers & place each one on the map  
      for( i = 0; i < markers.length; i++ ) {
          var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
          bounds.extend(position);
          marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);

            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);

    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}//initialize ends

GoogleMaps InfoWindow appear at a corner

Each instance of the function declared inside the for loop shares the same closure containing the value i, and so all of your addListener calls are essentially calling iw.open(map, undefined) since i will be off the end of the array at the end of the iteration.

See JavaScript closure inside loops – simple practical example for sample solutions to this problem, and How do JavaScript closures work for more information about closures in JavaScript in general.

gmaps4rails gem: to_gmaps4rails method undefined

You're using code from v1.x and 2.x.

to_gmaps4rails has been removed from the code base. So your first shot was ok:

def index
  @hash = Gmaps4rails.build_markers(TelemetryRecording.all) do |telemetry_recording, marker|
     marker.lat telemetry_recording.latitude
     marker.lng telemetry_recording.longitude
     marker.title telemetry_recording.delivery_unit.driver.full_name
     marker.infowindow telemetry_recording.delivery_unit.driver.full_name
  end
  respond_with @hash
end

and in the js

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
        var markers = handler.addMarkers(<%=raw @hash.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();

        $('body').on('click', '#replace_markers', function(){ 
            $.getJSON("/telemetry_recordings", function(newMarkers){
                handler.removeMarkers(markers); // to remove previous markers
                markers = handler.addMarkers(newMarkers);
            });
        });
    });   
    });
</script>

---

Related Topics