Marker dragging doesn't work on google maps v3 using java script. How to do it?
Question
This is the code that I am using to drop a marker after searching for an address and then dragging it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Local Search API + Maps API v3 demo</title>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<link href="./places.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ82LsCgTSsdpNEnBsExtoeJv4cdBSUkiLH6ntmAr_5O4EfjDwOa0oZBQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Our global state
var gLocalSearch;
var gMap;
var gInfoWindow;
var gSelectedResults = [];
var gCurrentResults = [];
var gSearchForm;
// Create our "tiny" marker icon
var gYellowIcon = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_yellow.png",
new google.maps.Size(12, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gRedIcon = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_red.png",
new google.maps.Size(12, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gSmallShadow = new google.maps.MarkerImage(
"http://labs.google.com/ridefinder/images/mm_20_shadow.png",
new google.maps.Size(22, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
// Set up the map and the local searcher.
function OnLoad() {
// Initialize the map with default UI.
gMap = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: 'roadmap'
});
// Create one InfoWindow to open when a marker is clicked.
gInfoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
unselectMarkers();
});
// Initialize the local searcher
gLocalSearch = new GlocalSearch();
gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
}
function unselectMarkers() {
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].unselect();
}
}
function doSearch() {
var query = document.getElementById("queryInput").value;
gLocalSearch.setCenterPoint(gMap.getCenter());
gLocalSearch.execute(query);
}
// Called when Local Search results are returned, we clear the old
// results and load the new ones.
function OnLocalSearch() {
if (!gLocalSearch.results) return;
var searchWell = document.getElementById("searchwell");
// Clear the map and the old search well
searchWell.innerHTML = "";
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].marker().setMap(null);
}
// Close the infowindow
gInfoWindow.close();
gCurrentResults = [];
for (var i = 0; i < gLocalSearch.results.length; i++) {
gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
}
var attribution = gLocalSearch.getAttribution();
if (attribution) {
document.getElementById("searchwell").appendChild(attribution);
}
// Move the map to the first result
var first = gLocalSearch.results[0];
gMap.setCenter(new google.maps.LatLng(parseFloat(first.lat),
parseFloat(first.lng)));
}
// Cancel the form submission, executing an AJAX Search API search.
function CaptureForm(searchForm) {
gLocalSearch.execute(searchForm.input.value);
return false;
}
// A class representing a single Local Search result returned by the
// Google AJAX Search API.
function LocalResult(result) {
var me = this;
me.result_ = result;
me.resultNode_ = me.node();
me.marker_ = me.marker();
google.maps.event.addDomListener(me.resultNode_, 'mouseover', function() {
// Highlight the marker and result icon when the result is
// mouseovered. Do not remove any other highlighting at this time.
me.highlight(true);
});
google.maps.event.addDomListener(me.resultNode_, 'mouseout', function() {
// Remove highlighting unless this marker is selected (the info
// window is open).
if (!me.selected_) me.highlight(false);
});
google.maps.event.addDomListener(me.resultNode_, 'click', function() {
me.select();
});
document.getElementById("searchwell").appendChild(me.resultNode_);
}
LocalResult.prototype.node = function() {
if (this.resultNode_) return this.resultNode_;
return this.html();
};
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
// Returns the GMap marker for this result, creating it with the given
// icon if it has not already been created.
LocalResult.prototype.marker = function() {
var me = this;
if (me.marker_) return me.marker_;
var marker = me.marker_ = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(me.result_.lat),
parseFloat(me.result_.lng)),
icon: gYellowIcon, shadow: gSmallShadow, map: gMap});
google.maps.event.addListener(marker, "click", function() {
me.select();
});
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
return marker;
};
// Unselect any selected markers and then highlight this result and
// display the info window on it.
LocalResult.prototype.select = function() {
unselectMarkers();
this.selected_ = true;
this.highlight(true);
gInfoWindow.setContent(this.html(true));
gInfoWindow.open(gMap, this.marker());
};
LocalResult.prototype.isSelected = function() {
return this.selected_;
};
// Remove any highlighting on this result.
LocalResult.prototype.unselect = function() {
this.selected_ = false;
this.highlight(false);
};
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
return container;
}
LocalResult.prototype.highlight = function(highlight) {
this.marker().setOptions({icon: highlight ? gRedIcon : gYellowIcon});
this.node().className = "unselected" + (highlight ? " red" : "");
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body style="font-family: Arial, sans-serif; font-size: small;">
<p>Perform a local search on the map below:</p>
<div style="width: 500px;">
<div style="margin-bottom: 5px;">
<div>
<input type="text" id="queryInput" value="pizza" style="width: 250px;"/>
<input type="button" value="Find" onclick="doSearch()"/>
</div>
</div>
<div style="position: absolute; left: 540px;">
<div id="searchwell"></div>
</div>
<div id="map" style="height: 350px; border: 1px solid #979797;"></div>
</div>
</body>
</html>
But the dragging of the marker doesn't work. How to make it work? This code is obviously taken from google samples.
1 answers
solution1
1 ACCPTED 2012-07-19 08:56:58
By default markers are not draggable. You must set the draggable -option of the marker(s) to true.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
removing marker google map doesn't work API v3
How can I check the marker is or isn't in the bounds using google maps v3
Django google-maps API v3 doesn't work with Chrome when using template variables
InfoWindow doesn't open correctly with link when marker is outside view on Google Maps V3
Marker doesn't show in maps api V3
Javascript Google Maps v3 API - can't add marker
Google maps API v3, can't get clicked marker
Google Maps Api Can't Display Marker with Json (v3)
How would you create an overlay that doesn't pan using Google Maps API V3?
multiple marker with Google Maps API V3 using postcode geocode
Related Tags