Friday, May 10, 2024
69
rated 0 times [  71] [ 2]  / answers: 1 / hits: 17100  / 9 Years ago, wed, march 11, 2015, 12:00:00

My end-goal: Load only map markers within current map viewport and if map is moved, reload map markers within new viewport.



As far as I know, to do this I need the map corner coordinates which I can only load once the map is idle, that way I can pass these coords to my PHP file to query my database and output the XML for the map markers within the corners (I'm trying to reduce the stress on my DB by restricting the query to only the relevant map area). I'm having trouble adding a dummy marker post-initialize (see code below). It's simply not loading the marker, everything else works fine.



<script src=https://maps.googleapis.com/maps/api/js?v=3.exp></script>

<script>

function initialize() {
var map = new google.maps.Map(document.getElementById(googleMap), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});

google.maps.event.addListener(map, 'idle', function() {
/*bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
window.top.showBounds();*/
TestMarker();

});
}

function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}

// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

More From » google-maps-api-3

 Answers
9

You don't need to wait for the idle event. The map bounds are available the first time the 'bounds_changed' event fires.


Wait for the bounds_changed event; whenever the bounds changes (including the first time), then update your markers on the map.


working fiddle


code snippet:




var map;
var bounds;

function initialize() {
map = new google.maps.Map(document.getElementById(googleMap), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});

google.maps.event.addListener(map, 'bounds_changed', function() {
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
document.getElementById('mapBounds').innerHTML = bounds.toUrlValue(6);
TestMarker();

});
}

function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}

// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>
<div id=mapBounds></div>
<div id=googleMap style=border: 2px solid #3872ac;></div>




[#67490] Monday, March 9, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
miles

Total Points: 256
Total Questions: 111
Total Answers: 104

Location: Benin
Member since Fri, Mar 24, 2023
1 Year ago
;