i've tried using google maps marker manager, but i seem to be hitting a brick wall everytime, i follow the tutorials on how to create markermanager on google documentation, but it seems nothing is working for me, is it a problem in how my code is written? running out of ideas here, at the moment i have set ONE marker to drop down on the map based on latlng.

can someone please try like implementing the tutorial code and find a working solution for me? its driving me mad.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="map_canvas" style="width:500px; height:500px;"></div>

   <script type="text/javascript" src=""></script>

    @*<script src="../../Scripts/markermanager.js" type="text/javascript"></script>*@

    <script type="text/javascript">

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP // map view, can be set to satellite, street, roadview, aerialview
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                animation: google.maps.Animation.DROP,
                title: "Uluru (Ayers Rock)"
            });

            marker.setMap(map);  
        }

        $(document).ready(function () {
            initialize();
        });

    </script>

i've tried using google maps marker manager, but i seem to be hitting a brick wall everytime, i follow the tutorials on how to create markermanager on google documentation, but it seems nothing is working for me, is it a problem in how my code is written? running out of ideas here, at the moment i have set ONE marker to drop down on the map based on latlng.

can someone please try like implementing the tutorial code and find a working solution for me? its driving me mad.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="map_canvas" style="width:500px; height:500px;"></div>

   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    @*<script src="../../Scripts/markermanager.js" type="text/javascript"></script>*@

    <script type="text/javascript">

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP // map view, can be set to satellite, street, roadview, aerialview
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                animation: google.maps.Animation.DROP,
                title: "Uluru (Ayers Rock)"
            });

            marker.setMap(map);  
        }

        $(document).ready(function () {
            initialize();
        });

    </script>

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

• 1 You've included the file but you're not using the marker manager class the the above code. Why is that? – Salman Arshad Commented Oct 19, 2011 at 9:33
• brings up errors: GBounds is not defined [Break On This Error] GBounds.prototype.containsPoint = function (point) { inside the markermanager.js file – mjcoder Commented Oct 19, 2011 at 9:39
• What marker manager are you using? Are you using a marker manager that was made for GMAP API v2 with GMAP API v3? – Salman Arshad Commented Oct 19, 2011 at 9:46
• right just put in the marker manager for v3, google dont make things simple, right im going to give it a go and create markers now using v3 and see how i get on. – mjcoder Commented Oct 19, 2011 at 9:53

1 Answer 1

Here is an example to get you started:

var map;
var mgr;

function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  mgr = new MarkerManager(map);
  google.maps.event.addListener(mgr, "loaded", function() {
    for (var i = 0; i < 1000; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180),
        title: "Random marker #" + i
      });
      mgr.addMarker(marker, 0);
    }
    mgr.refresh();
  });
}
google.maps.event.addDomListener(window, "load", initialize);

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>

<div id="map_canvas" style="height: 400px;"></div>
<p>Pan or zoom out to see markers</p>

Notice that when creating a marker, I did not specify map: map or marker.setMap(map). Instead, the markers are added to the marker manager which in turn adds them to the map when you call markermanager.refresh().

Also note that I've added all markers on the zoom level 0. Ideally you should load few markers on lower zoom levels and more markers on higher zoom levels.

• jsFiddle
• Marker Manager Reference
• Marker Manager Examples