API gmaps: marker personalizzato draggable
Non riesco a venirne fuori.... ho sostituito il marker "draggable" della mia mappa google maps con l immagine di una mia icona personalizzato ma ora, questa icona, non è più "draggable". Qualcuno potrebbe correggermi il codice per far si che la mia icona personalizzata sia "draggable"? Inoltre sò che c'è la possibilità di caricare l'icona direttamente dal mio server senza impostare i parametri nell html. Come posso fare?
questo è il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Find latitude and longitude with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFxd0p5mDcAGBVG1gLQuf dxQh9woNt75I8sSdeXsvTwvQgUADaBQEIBlTRhRLhtOGGfW5D-aL3EzMlw"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var icons = [];
icons["topix"] = new GIcon(G_DEFAULT_ICON, "casasemplice.png");
var geoXml = new GGeoXml("http://www.sostegnoalreddito.com/virtualagent/googlemaps/feed.xml?");
var map = new GMap2(document.getElementById("map"));
// inizio codice adsense
var map;
var publisherID = 'ca-pub-3558897812979188';
var adsManagerOptions = {
maxAdsOnMap : 2,
style: 'adunit',
channel: '1287041043'
};
adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();
// fine codice adsense
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(41.83683, 12.48047);
map.setCenter(center, 5);
geocoder = new GClientGeocoder();
var marker = new GMarker(center,icons["topix"],{draggable: true});
map.addOverlay(marker);
map.addOverlay(geoXml);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center,icons["topix"],{draggable: true});
map.addOverlay(marker);
map.addOverlay(geoXml);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
});
});
}
}
function showAddress(address) {
var geoXml = new GGeoXml("http://www.sostegnoalreddito.com/virtualagent/googlemaps/feed.xml?");
var map = new GMap2(document.getElementById("map"));
var icons = [];
icons["topix"] = new GIcon(G_DEFAULT_ICON, "casasemplice.png");
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// inizio codice adsense
var map;
var publisherID = 'ca-pub-3558897812979188';
var adsManagerOptions = {
maxAdsOnMap : 2,
style: 'adunit',
channel: '1287041043'
};
adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();
// fine codice adsense
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
map.clearOverlays()
map.setCenter(point, 19);
var marker = new GMarker(point,icons["topix"],{draggable: true});
map.addOverlay(marker);
map.addOverlay(geoXml);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center,icons["topix"],{draggable: true});
map.addOverlay(marker);
map.addOverlay(geoXml);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
});
});
}
}
);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()" >
<form action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="100" name="address" value="scrivi qui la città con eventualmente anche la via ed il numero civico che vuoi cercare" />
<input type="submit" value="Cerca" />
</p>
</form>
<p align="left">
<table bgcolor="#FFFFCC" width="300">
<tr>
<td width="100">Longitudine</td>
<td id="lng"></td>
<td width="100">Latitudine</td>
<td id="lat"></td>
</tr>
</table>
</p>
<div align="center" id="map" style="width: 1000px; height: 500px">
</div>
</p>
</div>
</body>
</html>
Rispondi quotando