[英]Change google map marker icon when clicking button inside infowindow
I have multiple markers on the map that I have imported from JSON.我从 JSON 导入的 map 上有多个标记。 Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image.
在标记信息窗口内,我有一个按钮,单击该按钮时,我想更改标记图像。 Please check my code below.
请在下面检查我的代码。 Marker list and Infowindow is working fine.
标记列表和信息窗口工作正常。 I just want to do some actions on the button that is inside infowindow.
我只想对信息窗口内的按钮执行一些操作。
var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
function myMap() {
var mapProp= {
center:new google.maps.LatLng(30.7333,76.7794),
zoom:10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"),mapProp);
image = 'images/blue_marker1.png';
image1 = 'images/pink_marker1.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude,list.longitude);
addMarker(map,list,price,position,marker);
}
}
function addMarker(map,list,price,position,marker){
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">'+
'<div class="content"> <h3>'+ list.name +
'</h3>'+
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>'+
'<p>Total cost to hire:</p>'+
'<p>Rate: $' + price.Price + ' per hour</p>'+
'<p>Total Cost: $'+ price.total_amount +'</p>'+
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map,marker)
$("#shortList").click(function(){
image = 'images/pink_marker1.png';
});
});
}
function shortList(){
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
Before you can access the <button id="shortList">
in the DOM with JQuery, it needs to be added to the DOM.在您可以使用 JQuery 访问 DOM 中的
<button id="shortList">
之前,需要将其添加到 DOM 中。 That happens asynchronously when the InfoWindow
content is rendered, the domready
event on the InfoWindow
fires when it is available.这在渲染
InfoWindow
内容时异步发生, InfoWindow
上的domready
事件在可用时触发。
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
// code here to change the icon
});
});
related question: How to detect button click in googlemaps infowindow相关问题: 如何检测 googlemaps infowindow 中的按钮点击
If you want the icon of the marker to change, you need to call .setIcon
on the marker:如果要更改标记的图标,则需要在标记上调用
.setIcon
:
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this; // save reference to marker to change its icon
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
proof of concept fiddle概念证明小提琴
code snippet:代码片段:
var workerlist; var jobprice = { Price: "$10", total_amount: "$100" }; var price; var map; var list; var position; var image; var image1; var marker; workerlist = [{ name: "Chandigarth", latitude: 30.7333, longitude: 76.7794 }, { name: "Chandigarth2", latitude: 30.7, longitude: 76.7 } ] function myMap() { var mapProp = { center: new google.maps.LatLng(30.7333, 76.7794), zoom: 10, disableDefaultUI: true }; map = new google.maps.Map(document.getElementById("map"), mapProp); image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png'; console.log(workerlist); for (var i = 0; i < workerlist.length; i++) { list = workerlist[i]; price = jobprice; position = new google.maps.LatLng(list.latitude, list.longitude); addMarker(map, list, price, position, marker); } } function addMarker(map, list, price, position, marker) { marker = new google.maps.Marker({ position: position, title: list.name, map: map, icon: image }); var contentString = '<div class="mapBox">' + '<div class="content"> <h3>' + list.name + '</h3>' + '<h6>(2.1 miles from the job venue)</h6>' + '<div class="rating"></div>' + '<p>Total cost to hire:</p>' + '<p>Rate: $' + price.Price + ' per hour</p>' + '<p>Total Cost: $' + price.total_amount + '</p>' + '</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' + '</div>'; marker.addListener('click', function() { if (typeof infowindow.= 'undefined') infowindow;close(). infowindow = new google.maps:InfoWindow({ content, contentString. }) infowindow,open(map; marker) var that = this. google.maps.event,addListener(infowindow, 'domready'. function() { $("#shortList"):click(function() { image = 'http.//maps.google.com/mapfiles/ms/micons/orange;png'. that;setIcon(image); }); }); }); } function shortList() { // alert('clicked'). // infowindow;close(). //marker;setIcon(image1); }
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html> <head> <title>Info Windows</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.