Google map reload marker updates scale

Question

I followed the gmaps4rails gem and I was able to reload the marker using the setinterval function. The problem I am facing is after each interval when the card goes back to the original, i.e. if I am enlarged, it returns to normal.

This is the code

success: (data, jqxhr, status) -> console.log('data.bookings', data) $('#multi_markers').removeClass('hidden') $('.empty_booking_text').removeClass('hidden') $('#sidebar_container').html('Please click any booking marker on the map') markers_from_api = data.bookings handler = Gmaps.build('Google') settings = { internal: { id: 'multi_markers' }, provider:{ styles: mapStyles } } handler.buildMap settings, -> markers = handler.addMarkers(markers_from_api) _.each markers,(marker, j) -> google.maps.event.addListener marker.serviceObject, 'click', (object) -> console.log marker.serviceObject.position.lng() render_marker_data markers_from_api[j].id return handler.bounds.extendWith markers handler.fitMapToBounds() setInterval () -> $ -> update_marker_data(handler) , 10000 

refresh marker every 10 seconds

 update_marker_data = (handler) -> markers = [] $.ajax '/technician_locations/current_location', type: 'GET' success: (data, jqxhr, status) -> # handler.removeMarkers() console.log(data) tech_markers_from_api = data.technician_locations tech_markers = handler.addMarkers(tech_markers_from_api) _.each tech_markers,(marker, j) -> markers.push(marker) # google.maps.event.addListener marker.serviceObject, 'click', (object) -> # render_marker_data tech_markers_from_api[j].id # return # handler.bounds.extendWith tech_markers setInterval () -> $ -> remove_marker(markers) , 9000 handler.fitMapToBounds() 

Answer 1

You can reference this thread for sample code. You just need to replace the markers with the x interval using AJAX .

 <script> handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers(<%=raw @hash.to_json %>); handler.bounds.extendWith(markers); $( document ).ready(function() { setInterval(function(){ $(function () { $.ajax({ type:"GET", url:"/path_to_controller_action", dataType:"json", data: {some_id:1}, success:function(result){ for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); handler.removeMarkers(markers); } markers = []; markers = handler.addMarkers(result); handler.bounds.extendWith(markers); } }) }); }, 10000); handler.fitMapToBounds(); handler.getMap().setZoom(17); }); }); </script>