CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
WhoopitySchmoopity
WhoopitySchmoopity

Reputation: 53

Google Maps API v3 - Add marker after initialize

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>

Upvotes: 4

Views: 17922

Answers (3)

geocodezip
geocodezip

Reputation: 161404

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>

Upvotes: 7

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

Google Maps Marker adding is very simple thing.I've created an example, for you.In this page there is some basic examples of google maps markers

http://www.w3docs.com/learn-javascript/google-maps-markers.html

Upvotes: -1

Barhum
Barhum

Reputation: 215

Why don't you add another listener event inside your initialize function:

google.maps.event.addListener(map, 'dragend', function(){
  var latlng = new google.maps.LatLng(35, -90);
  var marker = new google.maps.Marker({
    position: latlng
  });
  marker.setMap(map)
});

Upvotes: 1

Related Questions