CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Priya
Priya

Reputation: 1481

Move marker with mouse in google maps

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.com/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.com/maps/documentation/javascript/examples/marker-simple

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

Upvotes: 0

Views: 6126

Answers (3)

Priya
Priya

Reputation: 1481

 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

Upvotes: 4

sabotero
sabotero

Reputation: 4375

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.com/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

Upvotes: 2

Casperon
Casperon

Reputation: 107

Refer this for event listeners in google maps

Upvotes: 0

Related Questions