Wenn Sie auf ein div klicken, ändern Sie lat und lng des Markers von google maps?

Question

Wie kann ich eine Position von Marker ändern, wenn zum Beispiel auf div klicken?

dies Marker:

var marker= new google.maps.Marker({ 
     position: new google.maps.LatLng(30,30) 
     }); 

und es ist auf der Karte anzeigen, aber wenn ich ein div klicken Ich möchte, dass sie die Position ändern:

 $('div').on('click', function(){ 
     var marker= new google.maps.Marker({ 
      position: new google.maps.LatLng(60,60) 
     }); 
     }); 

, wie kann ich dies tun?

Answer 1

1. halten einen Verweis auf die Markierung, anstatt ein neues auf dem Klick
2. Änderung der Markierung der Position zu schaffen, wenn das Click-Ereignis

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(30, 30), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(30, 30), 
 
    map: map 
 
    }); 
 
    $('#btn').on('click', function() { 
 
    marker.setPosition(new google.maps.LatLng(60, 60)); 
 
    map.setCenter(marker.getPosition()); 
 
    }); 
 
    $('#btn2').on('click', function() { 
 
    marker.setPosition(new google.maps.LatLng(30, 30)); 
 
    map.setCenter(marker.getPosition()); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#footer { 
 
    height: 25px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="btn">click me 1</div> 
 
<div id="btn2">click me 2</div> 
 
<div id="map_canvas"></div> 
 
<div id="footer"></div>

geschieht