如何在具有两个位置的Google地图上添加标记?
问题描述:
我想在Google地图上添加带有两个可点击位置的标记.当我单击按钮时,应该随位置更改地图标记.
I would like to add markers on google map with two locations, that are clickable. When I click on the button it should change the map marker with the location.
<script>
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
zoom: 14,
});
var marker = new google.maps.Marker({
position: newLocation(),
map: map,
title: 'AGM-CORP',
icon: 'img/agm-marker.png'
});
}
function newLocation(newLat, newLng)
{
map.setCenter({
lat: newLat,
lng: newLng
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function ()
{
$("#1").on('click', function ()
{
newLocation(52.302516, 16.414546);
});
$("#2").on('click', function ()
{
newLocation(51.706478, 15.274753);
});
});
</script>
<div id="map-canvas"></div>
</div>
<h3>Zobacz lokalizację:</h3>
<button id="1" style="padding:10px; cursor:pointer;">Siedziba Firmy</button>
<button id="2" style="padding:10px;cursor:pointer;">Kopalnia Kruszyw</button>
</div>
答
var map = null
var marker = null;
var myLatLng = {
lat: 52.302516,
lng: 16.414546
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
zoom: 14,
});
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
function updateMap(lat, lng) {;
myLatLng.lat = lat;
myLatLng.lng = lng
map.setCenter(myLatLng);
marker.setPosition(myLatLng);
}
$(document).ready(function() {
$("#1").on('click', function() {
updateMap(52.302516, 16.414546);
});
$("#2").on('click', function() {
updateMap(51.706478, 15.274753);
});
});
我正在使用新标记初始化地图. 工作的jffiddle在这里
I am initing the map with new marker. Working jffiddle is here