Center map with more than 1 (one) marker

Question

Center map with more than 1 (one) marker

Navigation

#1 by (2 votes)

1

I would like a little help if possible.

I'm developing a website, and implementing Google Maps V3 Javascript functions, but I have not found any documentation on how to center the map containing 2 or more bookmarks.

Do not center on 1 (one) marker, but center the markers equally, automatically zoom in, etc.

I think I made it well explained, if anyone can help me thank you ...

UPDATE

I found the answer on the link that luciorubeens friend left in the comments ... link

javascript google-maps

asked by anonymous 29.01.2015 / 04:11

1 answer

Image alignment to the right of the div in Bootstrap JavaScript does not accept variable value

score 2 · Answer 1

Instead of using two points or more, use LatLngBounds() to center the map.

API -

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

-js

functioninitialize(){varmyOptions={center:newgoogle.maps.LatLng(45.4555729,9.169236),zoom:13,mapTypeId:google.maps.MapTypeId.ROADMAP,panControl:true,mapTypeControl:false,panControlOptions:{position:google.maps.ControlPosition.RIGHT_CENTER},zoomControl:true,zoomControlOptions:{style:google.maps.ZoomControlStyle.LARGE,position:google.maps.ControlPosition.RIGHT_CENTER},scaleControl:false,streetViewControl:false,streetViewControlOptions:{position:google.maps.ControlPosition.RIGHT_CENTER}};varmap=newgoogle.maps.Map(document.getElementById("mapCanvas"), myOptions);



    var Item_1 = new google.maps.LatLng(45.5983128, 8.9172776);

    var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

    var marker = new google.maps.Marker({
        position: Item_1,
        map: map
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    var bounds = new google.maps.LatLngBounds();
    bounds.extend(myPlace);
    bounds.extend(Item_1);
    map.fitBounds(bounds);

}
initialize();

-css

#mapCanvas{width:500px;height:300px;}

html -

<div id="mapCanvas"></div>

VIEW FUNCTIONING: link