StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackbone.js fetch issues with Google Maps
text
Body
copied!<p>With backbone I am fetching results from Google maps to return markers of places where the user is. The results populate a collection which I clear everytime the user moves the map as a new fetch occurs based on the new location bounds (I am using the google map idle event to get this information and changing the URL of the collection). </p> <p>To manage the markers I populate an array with each marker. </p> <p>The issue I am having is I get the first set of markers but it does not write in any new markers when the map is moved and when you inspect the markers array its the same results as last. If I do an AJAX call I get the desired results, but I want to keep this all within a backbone collection as I do other processes with the model.</p> <pre><code>/* Tracking Page Items */ var allPlace = Backbone.Model.extend({ createMarker:function(){ var marker = new google.maps.Marker({ position: this.getLatLng(), title: this.get("name"), location_type: this.get("type") }); return marker; } }); var MarkersCollection = Backbone.Collection.extend({ model: allPlace, url:function(){ return '/' } }) var markersArray = []; var mapAll = Backbone.View.extend({ initialize: function() { _.bindAll(this, 'render', 'createMarkers'); // get access to this in other methods this.collection.bind('reset', this.render, this); }, render: function() { // Load map scripts and initialise if(typeof google === "undefined"){ nzp.loadGoogleMap(); } else { nzp.initializeMap(); }; // Current location myLocations = { lat: this.collection.lat, lng: this.collection.lng }; // Listen for map movement var self = this; google.maps.event.addListener(map, 'idle', function() { var bounds = map.getBounds(); var lat1 = bounds.ca.b; var lng1 = bounds.ea.b; var lat2 = bounds.ca.f; var lng2 = bounds.ea.f; self.showMarkers(lat1, lng1, lat2, lng2); }); }, // update URL based on new bround showMarkers: function(lat1, lng1, lat2, lng2) { var markerCollection = new MarkersCollection; nzp.infoWindow = new google.maps.InfoWindow(); lat = myLatlng.Xa; lng = myLatlng.Ya; lat1 = lat1; lng1 = lng1; lat2 = lat2; lng2 = lng2; // Collection URL build from parameter adn current location markerCollection.url = "http://blah.com/locator/api/locations?api_key=XXX&nearby_latitude="+lat+"&nearby_longitude="+lng+"&lat1="+lat1+"&lng1="+lng1+"&lat2="+lat2+"&lng2="+lng2+"&max=10&format=jsonp&callback=?"; // Fetch collection markerCollection.fetch({ success: function(results) { // Clear the markers array for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; // Loop over items in collection results.map(function(item){ var marker = item.createMarker(); marker.setMap(map); // Create a marker based on each item (function(marker, item) { google.maps.event.addListener(marker, "click", function(e) { nzp.infoWindow.setContent(infowindowContent(item)); // Info window content is processed in a method within the model nzp.infoWindow.open(map, marker); }); // Place each marker in the markers arrya markersArray.push(marker); // Push markers into an array so they can be removed })(marker, item); }, this); } }); // Set markers to vidsible $.each(markersArray, function(index, item){ markersArray[index].setVisible(true); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload