Google Map Manager V3

Question

I tried using the google maps marker manager, but I seem to run into a brick wall every time, I follow the tutorials on how to create markermanager in google documentation, but it doesn't seem to work for me, this is the problem how my code is written ? The disappearance of ideas here, at the moment I installed ONE marker, which fell on the map based on latlng.

Can someone try to make a tutorial code and find a working solution for me? it drives me crazy.

@{ 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> 

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> 

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

Also note that I added all markers at zoom level 0 . Ideally, you should load multiple markers at lower zoom levels and more markers at higher zoom levels.

• jsFiddle
• Token Manager Reference
• Token Manager Examples