How do I make the info window editable in the Google Maps API?
- by zjm1126
I would like to make the info window editable when i click on it.
This is my code:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">
</head>
<body onload="initialize()" onunload="GUnload()">
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id="map_canvas" style="width: 500px; height: 300px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script>
<script type="text/javascript">
var aFn;
//**********
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center=new GLatLng(39.9493, 116.3975);
map.setCenter(center, 13);
aFn=function(x,y){
var point =new GPoint(x,y)
point = map.fromContainerPixelToLatLng(point);
//console.log(point.x+" "+point.y)
var marker = new GMarker(point,{draggable:true});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>wwww</b>");
});
map.addOverlay(marker);
/**********
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("????...");
});
map.addOverlay(marker);
//*/
}
$(".b").draggable({
revert: true,
revertDuration: 0
});
$("#map_canvas").droppable({
drop: function(event,ui) {
//console.log(ui.offset.left+' '+ui.offset.top)
aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
}
});
}
}
</script>
</body>
</html>
