谷歌地图api v3 infowindow没有显示点击

时间:2014-06-20 08:16:45

标签: google-maps google-maps-api-3 google-maps-markers infowindow

我似乎无法让它发挥作用。我在其他几个网站上使用过它,但是这个新网站不会显示我的信息窗口(信息框)。

标记处于适当位置,当你在标记上时,他正在显示标题。

我可以发布代码,但它附带了很多PHP并且有点混乱。

这是网址:

http://intertyre.server170.nognietactief.nl/montagepunten

我使用完全相同的sript:

http://www.tyfoonbanden.nl/tyfoon-dealers

工作完美。

不知道为什么会这样,所以如果有人知道导致问题的原因。请分享,因为我真的不知道。

提前致谢。

代码(我知道这是一团糟,必须

<script type="text/javascript">
var geocoder;
var map;
var side_bar_html = ""; 
var gmarkers = []; 
var infobox;
function initialize() {

// Create an array of styles.
var blueOceanStyles = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 } // <-- THIS
]
}
];

geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: <?php
                                if(is_array($postcodevelden) && count($postcodevelden) > 0 && !empty($_POST['address']))
{
switch($radius)
{
case "5":
                                            echo "12";
                                            break;
case "10":
                                            echo "11";
                                            break;
case "15":
case "20":
                                            echo "10";
                                            break;
case "30":
case "40":
                                            echo "9";
                                            break;
}
}else{
echo "7";
}
?>,
center: new google.maps.LatLng(<?php if(is_array($postcodevelden) && count($postcodevelden) > 0) { echo $lat.", ".$lon; } else { echo "52.2008737173322, 5.25146484375"; } ?>),             
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setOptions({styles: blueOceanStyles});

<?php
        if(is_array($adressen) AND count($adressen) > 0) 
        {
            foreach($adressen as $adres)
            {
$afstand = round((6371 * acos(sin(deg2rad($lat)) * sin(deg2rad($adres->locatie_lat)) + cos(deg2rad($lat)) * cos(deg2rad($adres->locatie_lat)) * cos(deg2rad($adres->locatie_lon) - (deg2rad($lon))))), 2);
?>
addMarker(<?php echo $adres->locatie_lat.", ".$adres->locatie_lon.", '".$adres->locatie_naam."', '".$adres->locatie_straat."', '".$adres->locatie_postcode."', '".$adres->locatie_plaats."', '".$adres->locatie_telefoon."', '".$adres->locatie_website."', '".$afstand."'"; ?>);
<?php
            }
        }
?>
document.getElementById("table_markers").innerHTML = side_bar_html;

}
function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}
var infowindow = new google.maps.InfoWindow({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 250,
pixelOffset: new google.maps.Size(0, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.95,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});

function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, website, afstand)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
icon: "/wp-content/uploads/wheel-icon.png",
title: naam
});

                            google.maps.event.addListener(marker, 'click', function() {
var contentString = '<div id="infobox">'+
'<b style="border-bottom: 1px solid #000000; color:#00377b;">' + naam + '</b><br/>'+
straat + '<br/>' +
postcode + ' ' + plaats + '<br/>';
if(telefoon != "")
{
contentString = contentString + telefoon + '<br/>';
}
if(website != "")
{
contentString = contentString + 'Website: <u><a target="_blank" rel="nofollow" href="http://' + website + '">' + website + '</a></u>';
}
contentString = contentString + '</div>';
                                infowindow.setContent(contentString);
infowindow.open(map, marker);
});
gmarkers.push(marker);

side_bar_html += '<table id="marker_list"><tr>'+ '<td onclick="javascript:myclick(' + (gmarkers.length-1) + ')"><a><h3>' + naam + '</h3>' + straat + '<br/>' + postcode + ' ' + plaats + '<br/>' + telefoon + '<br/>' + website + '<br/>' + '<u>Afstand ' + afstand + ' km</u>' +'</td>' +'<\/a></tr></table><br>';

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<form action="/montagepunten" method="POST">
                                                               <input id="address" name="address" type="textbox"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == 'zoek') { echo " value=\"".$_POST['address']."\""; } ?> style="float:left; height:30px; margin-right:10px; width:100px;"><select name="afstand" style="display:none;">
<option selected="selected" value="10">10 km</option>
</select>
<input type="submit" name="zoekpost" id="zoekpost" value="zoek">
</form>
<br/>                   
<br/>
<div class="mapborder">
<div class="map-width">
<div id="map_canvas"></div>
</div>
<div class="one_third-last" style="overflow-y:auto; overflow-x:hidden; height:579px; width:100%; clear:left; padding-top:0px; padding-bottom:0px; margin-top:20px;"><div id="table_markers"></div></div>
</div>

1 个答案:

答案 0 :(得分:0)

问题解决了......

代码没有问题,但多次加载google maps api存在冲突。

使用Avada作为网站主题。对于遇到此问题的其他用户:

WP Dashboard&gt;外观&gt;主题选项&gt;额外选项页面。

您可以停用Google地图Api for Avada,错误消失。