Google Map Marker Manager V3

Question

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>

Solution

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

Comments

[Salman A]

You've included the file but you're not using the marker manager class the the above code. Why is that?

[mjcoder]

excellent example.. just what i needed, so i see we have used a for loop which will create up to 1000 markers and place them randomly using the math.random(), how would i get it so when the map loads up all markers are shown without zooming in or out to see them all? will it be like: map.fitBounds(latlngbounds);

[mjcoder]

for the example above how would i fit all markers on map without zooming in/out? map.fitBounds(); is it like that?

[mjcoder]

working for me now, now i'll be looking at JSON Result in MVC3 :) thanks Salman :)

[Salman A]

Now that you mentioned JSON and Marker Manager, have a look at this page (uses api v2). Zoom the map out 5-6 times and pan the map; you'll notice the AJAX requests. Feel free to view-source.

[mjcoder]

how do i get an image url from my JSON on the google maps so when user clicks marker it displays image in the small popup window?

[Salman A]

I believe you can easily do this via infoWindows. Check out the examples on that page.