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 6 of 6
  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. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,419
    Thanks
    57
    Thanked 625 Times in 621 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. #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    worked great, thanks

  4. #4
    New to the CF scene
    Join Date
    Sep 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have same problem, I am adding multiple markers but i want to show only 1st and last marker
    for 1st marker i add array[0] it work but i want to add last marker for that i add array[array.length-1] but it shows all markers please help me

  5. #5
    New to the CF scene
    Join Date
    Sep 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please someone have solution of above query please reply...

  6. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,419
    Thanks
    57
    Thanked 625 Times in 621 Posts
    you need to post some code so we can see what's really going on


 

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
  •