javascript - Cannot trigger google maps marker click event from html button - Stack Overflow

IT技术

更新时间：2025-03-188

admin管理员组
文章数量:1331611

I try to create a HTML button which can fire a click event on a marker in google maps, so whenever I click the button, the map will automatically zoom in to the marker and display the infowindow. Here's my code

<!DOCTYPE html>
<html>
<head>
<script src=";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>

The map works almost perfectly; whenever I manually click the markers on the map, they behave as expected. However, when I click the buttons "Coba 1" and "coba2", they don't do anything. Also, any suggestions to make my code more elegant are weled (I'm not familiar with web programming).

EDIT Here's my working implementation with Jinja2:

<!DOCTYPE html>
<html>
<head>
<script src=";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>

I try to create a HTML button which can fire a click event on a marker in google maps, so whenever I click the button, the map will automatically zoom in to the marker and display the infowindow. Here's my code

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis./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>

The map works almost perfectly; whenever I manually click the markers on the map, they behave as expected. However, when I click the buttons "Coba 1" and "coba2", they don't do anything. Also, any suggestions to make my code more elegant are weled (I'm not familiar with web programming).

EDIT Here's my working implementation with Jinja2:

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis./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>

Share Improve this question edited Oct 22, 2017 at 23:14 ROMANIA_engineer 56.7k30 gold badges209 silver badges205 bronze badges asked Dec 20, 2013 at 5:42 halimakibb 331 gold badge1 silver badge5 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

Here's corrected code...

Demo

<html>
<head>
<script src="http://maps.googleapis./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>

本文标签： javascriptCannot trigger google maps marker click event from html buttonStack Overflow

版权声明：本文标题：javascript - Cannot trigger google maps marker click event from html button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742234565a2437837.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Cannot trigger google maps marker click event from html button - Stack Overflow

1 Answer 1

更多相关文章