All geek questions in one place

Google Maps: Remember the Token ID with an Information Box Open

I have a Google map that displays several markers. When the user moves the map, the markers are redrawn for new borders using the following code:

GEvent.addListener(map, "moveend", function() { var newBounds = map.getBounds(); for(var i = 0; i < places_json.places.length ; i++) { // if marker is within the new bounds then do... var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon); var html = "blah"; var marker = createMarker(latlng, html); map.addOverlay(marker); } });

My question is simple. If the user clicked on the marker to show the open info window, now when the borders are redrawn, the info window closes because the marker is added again from scratch. How can I prevent this?

This is not ideal, because often the borders are redrawn when the user clicks on the marker and the map moves to display the information window - therefore the information window appears and then disappears again :)

I think there are several possible ways:

  • remember which marker has an open info window, and open it again when the markers are redrawn.
  • don't really add a marker with an open info window, just leave it there

However, both require that the open-window marker has some kind of identification number, and I don’t know that this is really the case in the Google Maps API. Is anyone

---------- UPDATE ------------------

I tried to do this by loading markers into the original array, as suggested. This loads fine, but the page crashes after dragging the map.

 <script type="text/javascript" src="{{ MEDIA_URL }}js/markerclusterer.js"></script> <script type='text/javascript'> function createMarker(point,html, hideMarker) { //alert('createMarker'); var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png"; var tmpMarker = new GMarker(point, {icon: icon, hide: hideMarker}); GEvent.addListener(tmpMarker, "click", function() { tmpMarker.openInfoWindowHtml(html); }); return tmpMarker; } var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); var mapLatLng = new GLatLng({{ place.lat }}, {{ place.lon }}); map.setCenter(mapLatLng, 12); map.addOverlay(new GMarker(mapLatLng)); // load initial markers from json array var markers = []; var initialBounds = map.getBounds(); for(var i = 0; i < places_json.places.length ; i++) { var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon); var html = "<strong><a href='/place/" + places_json.places[i].placesidx + "/" + places_json.places[i].area + "'>" + places_json.places[i].area + "</a></strong><br/>" + places_json.places[i].county; var hideMarker = true; if((initialBounds.getSouthWest().lat() < places_json.places[i].lat) && (places_json.places[i].lat < initialBounds.getNorthEast().lat()) && (initialBounds.getSouthWest().lng() < places_json.places[i].lon) && (places_json.places[i].lon < initialBounds.getNorthEast().lng()) && (places_json.places[i].placesidx != {{ place.placesidx }})) { hideMarker = false; } var marker = createMarker(latlng, html, hideMarker); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 11}); </script>
+4
source share
2 answers

You should probably create all of your markers initially using the createMarker() method and save the returned GMarker objects inside the array. Be sure to set the hide: true property in GMarkerOptions when creating your markers so that they are created as hidden by default.

Then, instead of repeating with places_json.places you can iterate through your new GMarker array. You could get the coordinates of each marker using the GMarker.getLatLng() method, with which you can check whether each marker is within the borders.

Finally, simply call GMarker.show() for markers that lie within the borders, or GMarker.hide() to hide them.

You would eliminate the costly destruction / creation of markers on each movement of the map. As a positive effect, this will also solve the GInfoWindow problem.

+2
source

If you use a lot of markers, make sure you use the GMarkerManager. It is designed for many markers, with only a few visible at once.

http://mapki.com/wiki/Marker_Optimization_Tips

+1
source

Source: https://habr.com/ru/post/1300322/

More articles:


All Articles