Google maps ajustement automatique (auto center & zoom automatique) ne fonctionne pas

J'ai un problème avec une carte sur laquelle j'ai utilisé le fitBounds carte méthodes, qui devrait donner le bon zoom et le centre de la carte en lui donnant un latlon tableau. voici le code:

<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>

Les marqueurs sont correctement placés sur la carte, mais j'obtiens le maximum de zoom disponibles:

Toute aide?

Le panToBounds appel est un peu redondant, mais je suppose que c'était juste essayer de le faire fonctionner. Aussi, vous appeler limites.extend() deux fois, mais il ne devrait pas être un problème nouveau. Lorsque vous vérifiez votre limites, qui ne contient pas de valeur correcte?
Ignorer le php et regardez seulement ce que le navigateur voit. Faire "afficher la source" dans votre navigateur et après que le code à la place.

OriginalL'auteur Luke | 2012-09-10

J'ai mis à jour votre violon ici: http://jsfiddle.net/KwayW/1/

Il fonctionne maintenant comme prévu.

Voici le code complet (l'enregistrer comme test.html et de l'ouvrir dans le navigateur):

<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>

Salut. c'est le violon: jsfiddle.net/9kxz8
J'ai corrigé votre violon (il n'a pas d'afficher la carte) et il fonctionne comme prévu.
eh bien, j'ai essayé ton code mais il ne fonctionne pas en local sur ma machine, même résultat. d'où le code diffère de l'original?
Excellent code, aidé dans mon projet et a travaillé un régal! Merci

OriginalL'auteur tborychowski

Vous devez vous connecter pour publier un commentaire.