Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Zoom To Fit All Markers on Google Maps API v3

    I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array.

    I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Marker Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });
    	//  Make an array of the LatLng's of the markers you want to show
    	var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
    	//  Create a new viewpoint bound
    	var bounds = new google.maps.LatLngBounds ();
    	//  Go through each...
    	for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
    	//  And increase the bounds to take this point
    	bounds.extend (LatLngList[i]);
    	}
    	//  Fit these bounds to the map
    	map.fitBounds (bounds);
    
      }
    
    </script>
    
    </head>
    <body onload="initialize()">
      <div id="map_canvas" style="width:650px;height:550px;"></div>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it's a terribly written example, with bugs that make it doomed to fail... and after fixing them, it doesn't even put markers on the map! Amazing that it got good comments. But anyway. Try this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Marker Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
        
    	//  Make an array of the LatLng's of the markers you want to show
    	var LatLngList = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
    	//  Create a new viewpoint bound
    	var bounds = new google.maps.LatLngBounds ();
    	//  Go through each...
    	for (var i = 0; i < LatLngList.length; i++) {
    	var marker = new google.maps.Marker({
            position: LatLngList[i],
            map: map,
            title:"Hello World!"
        });
    	//  And increase the bounds to take this point
    	bounds.extend (LatLngList[i]);
    	}
    	//  Fit these bounds to the map
    	map.fitBounds (bounds);
    
      }
    
    </script>
    
    </head>
    <body onload="initialize()">
      <div id="map_canvas" style="width:650px;height:550px;"></div>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    worked great, thanks


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •