Google Maps V3: Need Multiple Draggable Markers To Update Html Input Fields
I'm working on a project using Google Maps v3 that will allow users to drag and drop randomly placed markers (quantity, coordinates, and labels generated with php). I would like th
Solution 1:
Here is the answer. Define a custom id based on your marker properties and based on that access yout input field ids:
<!DOCTYPE html><html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no" /><styletype="text/css">html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true"></script><scripttype="text/javascript">functioninitialize()
{
var latlng = new google.maps.LatLng(39.3939,-119.861);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// Set Border CoordsvarBorderCoords =
[
new google.maps.LatLng(39.3952726888,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.86277152),
new google.maps.LatLng(39.3952726888,-119.86277152)
];
// Define BorderBorder = new google.maps.Polygon
({
map: map,
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
// Set marker coordsvarMarkerCoords =
[
[39.3930761,-119.8612324],
[39.3947606,-119.8617452],
[39.3948516,-119.8619689],
[39.3929412,-119.859542],
[39.3947902,-119.8601571],
[39.3940501,-119.8593369]
];
// Set marker propertiesvarMarkerProp =
[
["Red","A",],
["Red","B"],
["Red","C"],
["Blue","A"],
["Blue","B"],
["Blue","C"]
];
// Define marker coordsfor (var i = 0; i < MarkerCoords.length; i++)
{
var markers = new google.maps.Marker
({
map: map,
position: new google.maps.LatLng(MarkerCoords[i][0],MarkerCoords[i][1]),
clickable: true,
draggable: true,
//define a custom id based on marker propertiesmy_id: MarkerProp[i][0] +"_"+MarkerProp[i][1],
icon: 'img/icons/'+MarkerProp[i][0]+'/letter_'+MarkerProp[i][1]+'.png'
});
google.maps.event.addListener(markers, "dragend", function()
{
//These variables will not work//var latstr = eval('lat_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);//var lngstr = eval('lng_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);//var lat = document.getElementById(latstr);//var lng = document.getElementById(lngstr);//get the id of the markervar marker_id = this.my_id;
//match the fields to updatevar lat = document.getElementById('lat_' + marker_id);
var lng = document.getElementById('lng_' + marker_id);
var coords = this.getPosition()
lat.value = coords.lat();
lng.value = coords.lng();
});
}
}
</script></head><bodyonload="initialize()"><divid="map_canvas"style="width:700px; height:400px"></div><br/><inputid="lat_Red_A"type="text"><inputid="lng_Red_A"type="text"><br/><inputid="lat_Red_B"type="text"><inputid="lng_Red_B"type="text"><br/><inputid="lat_Red_C"type="text"><inputid="lng_Red_C"type="text"><br/><inputid="lat_Blue_A"type="text"><inputid="lng_Blue_A"type="text"><br/><inputid="lat_Blue_B"type="text"><inputid="lng_Blue_B"type="text"><br/><inputid="lat_Blue_C"type="text"><inputid="lng_Blue_C"type="text"><br/></body></html>Solution 2:
Well one of the beautiful things about JavaScript is that you can assign objects fields on the fly. One thing you could do would give each marker a name or an id. To do that you simply say:
marker.id = whatever;Then you can get the value of that like you would any property by calling marker.id;
That is probably the most efficient way of giving them unique id's. In your eventhandler for the dragend you could then just do and if-then-else to check which marker it was and update the related input fields.
Post a Comment for "Google Maps V3: Need Multiple Draggable Markers To Update Html Input Fields"