web-dev-qa-db-ja.com

Googleマップの自動調整（自動中心と自動ズーム）が機能しない

fitBoundsマップメソッドを使用したマップに問題があります。これにより、適切なズームが提供され、マップが中央に配置され、latlon配列が提供されます。これがコードです：

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


<div id="map_canvas">

<script type="text/javascript">
    var map;
    var bounds = new google.maps.LatLngBounds(null);

    function initialize() {
        var mapOptions = {       

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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



        <?php
        foreach ($this->getProductCollection() as $_e):
            $event = Mage::getModel('catalog/product')->load($_e->getId());
            ?>
                var loc = new google.maps.LatLng("<?php echo $event->getEventLocationLatitude(); ?>","<?php echo $event->getEventLocationLongitude(); ?>");
                 bounds.extend(loc);
                addMarker(loc, '<?php echo $event->getName(); ?>', "active");
                bounds.extend(loc);

        <?php endforeach; ?>


        map.fitBounds(bounds);
        map.panToBounds(bounds);


    }


function addMarker(location, name, active) {          
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: name,
        status: active
    });

}



jQuery.noConflict();

jQuery(document).ready(function(){
    initialize();
});
</script>

マーカーは地図上に正しく配置されていますが、利用可能な最大ズームが得られます。

enter image description here

何か助けは？

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
17
Luke

ここであなたのフィドルを更新しました： http://jsfiddle.net/KwayW/1/

期待どおりに動作します。

これが完全なコードです（これをtest.htmlとして保存し、ブラウザーで開きます）。

<style>#map_canvas { width:500px; height: 400px; }</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<div id="map_canvas"></div>

<script>
var map;
var markersArray = [];
var image = 'img/';
var bounds = new google.maps.LatLngBounds();
var loc;

function init(){
    var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    loc = new google.maps.LatLng("45.478294","9.123949");
    bounds.extend(loc);
    addMarker(loc, 'Event A', "active");

    loc = new google.maps.LatLng("50.83417876788752","4.298325777053833");
    bounds.extend(loc);
    addMarker(loc, 'Event B', "active");

    loc = new google.maps.LatLng("41.3887035","2.1807378");
    bounds.extend(loc);
    addMarker(loc, 'Event C', "active");

    map.fitBounds(bounds);
    map.panToBounds(bounds);    
}

function addMarker(location, name, active) {          
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: name,
        status: active
    });
}

$(function(){ init(); });
</script>
33
Dziad Borowy