Mapa Google: słuchacz myszy nie działa w Wordpress

Próba zaimplementowania mapy w WP przy użyciu Google Maps API v3 i problem z niedziałającym listenerem przypisanym do zdarzenia mouseout. Użyty kod to kopia i wklejanie z innej witryny, która działa poprawnie. Funkcjonalność to: mouseover pokazuje okno informacyjne, a mouseout ukrywa je. Problem polega na tym, że po najechaniu na dowolny znacznik nie można nawet przeciągnąć mapy

Dobra: http://www.fashiontraveler.com/shanghai-shopping-guide-map.htm

header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/common.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
    locations = [<?php echo $locations; ?>];
    iwData = [<?php echo $iwData; ?>];
</script>

Strona

<div id="city_canvas" style="margin-top:40px; width:500px; height:300px; border:solid 1px #000;"><script>window.onload = function() {sdgCityMap(<?php echo $cityCoord; ?>);}</script></div>

common.js

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
    map = new google.maps.Map(document.getElementById("city_canvas"), myOptions);

    function buildOverHandler(i) {
        return function() {showIW(i);};
    }

    function buildClickHandler(i) {
        return function() {lnkToStore(i);};
    }

    for (i in locations) {
        myIcon = (locations[i][0] == 1) ? "http://www.fashiontraveler.com/newsite/media/imgs/maps/mono_store.png" : "http://www.fashiontraveler.com/newsite/media/imgs/maps/multi_store.png";
        image = new google.maps.MarkerImage(myIcon, new google.maps.Size(45,22));
        coords[i] = new google.maps.LatLng(locations[i][2],locations[i][3]);
        markers[i] = new google.maps.Marker({position:coords[i], map:map, icon:image});
        google.maps.event.addListener(markers[i], 'mouseover', buildOverHandler(i));
        google.maps.event.addListener(markers[i], 'mouseout', function(event) {infoWin.close();});
        google.maps.event.addListener(markers[i], 'click', buildClickHandler(i));
    }
    centerZoomMap();
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}

google-maps javascript wordpress scope
person hsands    schedule 20.04.2011    source źródło
comment
Czy infoWin jest definiowany globalnie? Jeśli tak, wklej również tę część kodu. Czy debugger javascript coś Ci powie? Narzędzia internetowe Firebug/Chrome?   -  person kovshenin    schedule 21.04.2011
comment
@kovshenin: Tak, infoWin jest zdefiniowane globalnie; Do kodu dodałem deklaracje vars. Problem polegał na tym, że var infoWin został przedefiniowany na końcu pliku, chyba w operacji kopiuj/wklej. Co ciekawe, błąd nie jest wywoływany na stronie z czystym PHP/HTML/JS, ale na stronie opartej na Wordpressie. Myślę, że z powodu pewnych konfliktów z bibliotekami JS dołączonymi do WP. Bardzo dziękuję za Twoją pomoc!   -  person hsands    schedule 21.04.2011
comment
Możesz chcieć opublikować rozwiązanie jako odpowiedź, bo tak naprawdę nie zrozumiałem ;)   -  person kovshenin    schedule 22.04.2011

Odpowiedzi (1)


arrow_upward
0
arrow_downward

Problem był spowodowany dwukrotnym zdefiniowaniem var infoWin, na początku i na końcu pliku; Chyba w operacji kopiowania/wklejania

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}
person hsands    schedule 02.05.2011