fitbounds for google maps api v3 doesn't center on my polylines

Question

I want to be able to center zoom on all my polylines for my site.

Also, I'd like to add markers to each of these new coordinate pairs. I've seen lots of examples for multiple markers and multiple plygons, but never for polylines and I can't get around this problem...

I've seen some very helpful pages like this one: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

But most of them assume some kind of knowledge beforehand, whereas I don't know much.

This is my code:

<script type="text/javascript">

  function initialize() {
  var myLatLng = new google.maps.LatLng(45.397, 5.644);
  var centerLatLng = new google.maps.LatLng(35.71,-1.905);

  var myOptions = {
    zoom: 5,
    center: centerLatLng,
    scrollwheel: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(45.397, 5.644),
    new google.maps.LatLng(28.713383,-17.905781),
    new google.maps.LatLng(20.713383,-19.905781),
    new google.maps.LatLng(25.713383,-29.905781),

  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#dddd00",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  flightPath.setMap(map);

}
</script>

Thanks in advance, I am very new to googles API and to this site.

Answer 1

Try adding positions of your points to a bounds object and then using fitBounds, something like this:

var bounds = new google.maps.LatLngBounds();

var point1 = new google.maps.LatLng(45.397, 5.644);
bounds.extend(point1);
var point2 = new google.maps.LatLng(28.713383,-17.905781);
bounds.extend(point2);
var point3 = new google.maps.LatLng(20.713383,-19.905781);
bounds.extend(point3);
var point4 = new google.maps.LatLng(25.713383,-29.905781);
bounds.extend(point4);

map.fitBounds(bounds);