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
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
3 Answers
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