無法觸發谷歌地圖標記點擊事件從HTML按鈕

我嘗試創建一個HTML按鈕，可以觸發谷歌地圖上的標記的點擊事件，所以每當我點擊按鈕，地圖將自動放大到標記和顯示infowindow。這裏是我的代碼無法觸發谷歌地圖標記點擊事件從HTML按鈕

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-XFi-PrFDZgDYRRD3PDtY4-xcRt6lkA&sensor=false"> 
</script> 

</head> 

<body> 

<form method = "post"> 
    <button name="semua" type="submit" value="">Semua</button> 
    <button name="makanan" type="submit" value="Ayam">Ayam</button> 
</form> 

<script> 
function initialize() 
{ 

var mapCenter = new google.maps.LatLng(-7.79793, 110.36933); 
var infowindow = null; 

var mapProp = { 
    center:mapCenter, 
    zoom:12, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map=new google.maps.Map(document.getElementById("googleMap") 
    ,mapProp); 

var Coba1center = new google.maps.LatLng(-7.79793,110.36933); 
var Coba1marker = new google.maps.Marker({ 
    position:Coba1center, 
    }); 

google.maps.event.addListener(Coba1marker,'click',function() { 
    map.setZoom(15); 
    map.setCenter(Coba1marker.getPosition()); 
    if (infowindow) { 
     infowindow.close(); 
    } 
    infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent("Coba1") 
    infowindow.open(map,Coba1marker); 
}); 

Coba1marker.setMap(map); 

function showMarker(marker){ 
    google.maps.event.trigger(marker, 'click'); 
} 

var coba2center = new google.maps.LatLng(-7.78793,110.36933); 
var coba2marker = new google.maps.Marker({ 
    position:coba2center, 
}); 

google.maps.event.addListener(coba2marker,'click',function() { 
    map.setZoom(15); 
    map.setCenter(coba2marker.getPosition()); 
    if (infowindow) { 
     infowindow.close(); 
    } 
    infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent("itu") 
    infowindow.open(map,coba2marker); 
}); 

coba2marker.setMap(map); 

} 

function showMarker(marker){ 
    google.maps.event.trigger(marker, 'click'); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Coba1 <button type="button" onclick="showMarker(Coba1marker)">Click Me!</button> <br> 

coba2 <button type="button" onclick="showMarker(coba2marker)">Click Me!</button> <br> 

<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html>

該地圖工程幾乎完美;無論何時我手動點擊地圖上的標記，它們都會按預期行事。但是，當我點擊按鈕「科巴1」和「coba2」時，他們什麼都不做。此外，任何建議使我的代碼更優雅（我不熟悉網絡編程）。

編輯這是我的工作與實現Jinja2的：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-XFi-PrFDZgDYRRD3PDtY4-xcRt6lkA&sensor=false"> 
</script> 
</head> 

<body> 
<form method = "post"> 
    <button name="semua" type="submit" value="">Semua</button> 
    <button name="makanan" type="submit" value="Ayam">Ayam</button> 
</form> 

<script> 

{% for m in maps %} 
    var {{ m.name }}{{ 'center' }} = new google.maps.LatLng({{m.latlon}}); 
    var {{ m.name }}{{ 'marker' }} = new google.maps.Marker({ 
    position:{{ m.name }}{{ 'center' }}, 
    }); 
{% endfor %} 

function initialize() 
{ 

var mapCenter = new google.maps.LatLng(-7.79793, 110.36933); 
var infowindow = null; 

var mapProp = { 
    center:mapCenter, 
    zoom:12, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map=new google.maps.Map(document.getElementById("googleMap") 
    ,mapProp); 

function setMarker(marker){ 
    map.setZoom(15); 
    map.setCenter(marker.getPosition()); 
    if (infowindow) { 
     infowindow.close(); 
    } 
    infowindow = new google.maps.InfoWindow(); 
} 

{% for m in maps %} 

google.maps.event.addListener({{ m.name }}{{ 'marker' }},'click',function() { 
    setMarker({{ m.name }}{{ 'marker' }}); 
    infowindow.setContent("{{ m.desc }}"); 
    infowindow.open(map,{{ m.name }}{{ 'marker' }}); 
    }); 

{{ m.name }}{{ 'marker' }}.setMap(map); 
{% endfor %} 

} 

function showMarker(marker){ 
    google.maps.event.trigger(marker, 'click') 
} 

google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

{% for m in maps %} 
{{ m.name }} <button type="button" onclick="showMarker({{ m.name }}{{ 'marker' }})">Click Me!</button> <br> 
{% endfor %} 

<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html>

來源

2013-12-20 halimakibb

這裏的更正後的代碼...

Demo

<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-XFi-PrFDZgDYRRD3PDtY4-xcRt6lkA&sensor=false"> 
</script> 

</head> 

<body> 


<form method = "post"> 
    <button name="semua" type="submit" value="">Semua</button> 
    <button name="makanan" type="submit" value="Ayam">Ayam</button> 
</form> 

<script> 
var Coba1center = new google.maps.LatLng(-7.79793,110.36933); 
var Coba1marker = new google.maps.Marker({ 
    position:Coba1center, 
    }); 

var coba2center = new google.maps.LatLng(-7.78793,110.36933); 
var coba2marker = new google.maps.Marker({ 
    position:coba2center, 
    }); 

function initialize() 
{ 

var mapCenter = new google.maps.LatLng(-7.79793, 110.36933); 
var infowindow = null; 

var mapProp = { 
    center:mapCenter, 
    zoom:12, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map=new google.maps.Map(document.getElementById("googleMap") 
    ,mapProp); 


google.maps.event.addListener(Coba1marker,'click',function() { 
    map.setZoom(15); 
    map.setCenter(Coba1marker.getPosition()); 
    if (infowindow) { 
     infowindow.close(); 
    } 
    infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent("Coba1") 
    infowindow.open(map,Coba1marker); 
    }); 


Coba1marker.setMap(map); 

google.maps.event.addListener(coba2marker,'click',function() { 
    map.setZoom(15); 
    map.setCenter(coba2marker.getPosition()); 
    if (infowindow) { 
     infowindow.close(); 
    } 
    infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent("itu") 
    infowindow.open(map,coba2marker); 
    }); 


coba2marker.setMap(map); 

} 

function showMarker(marker){ 
    var gMarker = null; 
    var center = null; 
    console.log(marker); 
    if(marker === 'Coba1marker') { 
     gMarker = Coba1marker; 
     center = Coba1center; 
    } 
    else if(marker === 'coba2marker') { 
     gMarker = coba2marker; 
     center = coba2center; 
    } 

    console.log(gMarker); 
    console.log(center); 
    google.maps.event.trigger(gMarker, 'click', { 
     latLng: center 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

Coba1 <button type="button" onclick="showMarker('Coba1marker')">Click Me!</button> <br> 

coba2 <button type="button" onclick="showMarker('coba2marker')">Click Me!</button> <br> 

<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html>

來源

2013-12-20 06:03:39 nik

謝謝，我會嘗試這一個 – halimakibb

謝謝，這個作品。看來我最初將標記設置爲局部變量。 – halimakibb

是的..你也是對的！ – nik

無法觸發谷歌地圖標記點擊事件從HTML按鈕

回答

相關問題