admin管理员组

文章数量:1391977

I want to move marker with mouse move event on google maps.

Following is my code to add marker on google maps.

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src=".exp&sensor=false"></script>
<script>
function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var mapOptions = {
   zoom: 4,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!'
 });
 }

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

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

This is a simple marker example taken from

On mouse move i want to move marker with mouse. But i dont know how to do it

I want to move marker with mouse move event on google maps.

Following is my code to add marker on google maps.

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var mapOptions = {
   zoom: 4,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!'
 });
 }

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

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

This is a simple marker example taken from https://developers.google./maps/documentation/javascript/examples/marker-simple

On mouse move i want to move marker with mouse. But i dont know how to do it

  • javascript
  • google-maps
  • google-maps-api-3
Share Improve this question asked Dec 10, 2013 at 7:28 PriyaPriya 1,4814 gold badges32 silver badges56 bronze badges 1
  • are you sure is not making the marker draggable what you want? var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!', draggalbe: true }); – sabotero Commented Dec 10, 2013 at 8:33
Add a ment  | 

3 Answers 3

Reset to default 4 
 var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                title: 'Click to zoom'
            });

            google.maps.event.addListener(map, 'mousemove', function(e) {
                marker.setPosition(e.latLng);
            });

Using this code we can move marker with mouse on google maps

If I understant you want to be able to move the marker with the mouse. Not necessarily to move it at the mousemouve event. To be able to do this all you have to do is set the draggable property of the marker to true.

Consider the following exemple:

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var mapOptions = {
   zoom: 4,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!',
  draggable: true
 });
 }

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

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

To refer to all properties the marker have read: MarkerOptions

Refer this for event listeners in google maps

本文标签： javascriptMove marker with mouse in google mapsStack Overflow

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