hi all,
sorry for bad eng..
this draw polyline on g map and then fetch details from php;
my prob is that when user draw a point , distance from that point should be display in miles to another point when his mouse drag to another point.
any help or idea appre...
thnx
<script type="text/javascript">
var map, polygon;
var geocoder;
var polyPointsCityArr = new Array();
// var allClickedCityArr = new Array();
function initializeMap(){
if (GBrowserIsCompatible()) {
// initialize the map
map = new GMap2(document.getElementById("canvas"));
map.addControl(new GSmallMapControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(42.428549, -71.06059), 14);
geocoder = new GClientGeocoder();
GEvent.addListener(map, "zoomend", function() {
zoomChanged();
});
GEvent.addListener(map, "click", function(overlay, latlng){
if(latlng){
//to get the address from lat long.. reversegeocoding...
geocoder.getLocations(latlng, getCity);
}
}
);
}
}
//function InitDistances(latlng) {
//alert("dfd".latlng);
// var startLocation = new GLatLng(startLat, startLon);
//var endLocation = new GLatLng(endLat, endLon);
//var dist = startLocation .distanceFrom(endLocation);
//Convert distance to miles with two decimal points precision
//return (dist / 1609.344).toFixed(2);
//}
function getCity(response){
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
if (place.address) {
// alert(place.address);
var arr = place.address.split(",");
if(arr){
polyPointsCityArr.push(arr[1]);
}
}
}
}
//////// to get the address of particualr point .. give lantlong, it will return address ////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
function drawASearch(){
//$('draw_button').src="./images/clear_search.png";
//$('#draw_button').attributes['onclick'].value = "resetMap()";
enableDrawing();
}
function resetMap(){
//$('draw_button').src="./image/new_area.png";
//$('draw_button').attributes['onclick'].value ="drawASearch()";
map.clearOverlays();
polyPointsCityArr.length=0;
enableDrawing();
document.getElementById('WAIT').style.display="none";
}
////////////////////////////////// To draw a polygon //////////////////////////////////////////////////////
function enableDrawing() {
polygon && map.removeOverlay(polygon);
// add a polygon to the map with no vertices
polygon = new GPolygon([], "#0000FF", 2, 1.0, "#0000FF", 0.5);
map.addOverlay(polygon);
// register a listener for "endline" event and enable drawing
GEvent.addListener(polygon, "endline", polygonCheckFunc);
polygon.enableDrawing();
//getAddressByLatLong(event.latLng);
}
function polygonCheckFunc(){
// alert(polyPointsCityArr);
/* var uniqueCityArr = removeDuplicateElement(polyPointsCityArr);
var finalArr = new Array();
if(allClickedCityArr.length>0){
for(var i=0;i<uniqueCityArr.length;i++){
if(!allClickedCityArr.inArray(uniqueCityArr[i])){
finalArr.push(uniqueCityArr[i]);
}
}
}else{
allClickedCityArr = uniqueCityArr;
finalArr = uniqueCityArr;
}
alert(finalArr);
var mergeArr = allClickedCityArr.concat(uniqueCityArr);
allClickedCityArr = removeDuplicateElement(mergeArr);*/
/* for(var i=0;i<uniqueCityArr.length;i++){
cityArr.push(uniqueCityArr[i]);
}
*/
//alert(allClickedCityArr);
getAllListingsByCity(polyPointsCityArr);
}
function getAllListingsByCity(cityArr){
var postData = "";
//alert(cityArr);
for(var i=0;i<cityArr.length;i++){
postData += "&cityArr["+i+"]="+cityArr[i];
}
document.getElementById("WT").style.left = (screen.availWidth/2 - (300/2))+"px";
document.getElementById("WT").style.top = ((screen.availHeight/2)-50)+"px";
document.getElementById("WA").style.display = '';
document.getElementById("CO").style.display = '';
document.getElementById("CO").style.height = screen.availHeight+'px';
var url = "ppgloab.php?view=search&act=getLatLong";
new Ajax.Request(url,{
method:"post",
postBody: postData,
onComplete: function(transport){
//alert(transport.responseText);
if(transport.status == 200){
alert(transport.responseText);
var response = transport.responseText.evalJSON();
var responseData = response;
//alert(response.latlng.length);
//alert(responseDatea);
document.getElementById("WAIT").style.display = 'none';
document.getElementById("COVER").style.display = 'none';
placeListingMarkers(responseData);
//alert(responseData.latlng.length);
}else{
document.getElementById("WAIT").style.display = 'none';
document.getElementById("COVER").style.display = 'none';
alert("There is a problem while loading properties.");
}
}
});
}
/*function stop_request()
{
Event.observe('stp', 'click', function(event) {
//var login = $F('login').strip();
Event.stop(event);
});
}*/
function placeListingMarkers(responseData){
for(var i=0;i<responseData.listingData.length;i++){
(function () { /* ################################################## */
var lat = responseData.listingData[i][0];
var long = responseData.listingData[i][1];
var address = responseData.listingData[i][2];
var propertyType = responseData.listingData[i][3];
var beds = responseData.listingData[i][4];
var baths = responseData.listingData[i][5];
var photo_url = responseData.listingData[i][6];
var listPrice = responseData.listingData[i][7];
var pid = responseData.listingData[i][8];
var latlng = new GLatLng(lat,long);
if(polygon.containsLatLng(latlng)){
if(beds!=null && baths!=null){
var contentString = "<table><tr><td><img src='"+photo_url+"' width='100px' height='90px' /></td><td valign='top' style='padding:5px; font-family:Verdana, Geneva, sans-serif; font-size:10px'><strong>"+propertyType+"</strong><br><br>"+beds+" Beds | "+baths+" Baths<br>$ "+listPrice+"<br>"+address+"</td></tr><tr><td><a href='index.php?view=property_listing_detail&property_id="+pid+"' style='text-decoration:underline; font-family:Verdana, Geneva, sans-serif; font-size:10px' target='_blank'>Details</a></td></tr></table>";
}else{
var contentString = "<table><tr><td><img src='"+photo_url+"' width='100px' height='90px' /></td><td valign='top' style='padding:5px; font-family:Verdana, Geneva, sans-serif; font-size:10px'><strong>"+propertyType+"</strong><br>$ "+listPrice+"<br>"+address+"</td></tr><tr><td><a href='index.php?view=property_listing_detail&property_id="+pid+"' style='text-decoration:underline; font-family:Verdana, Geneva, sans-serif; font-size:10px' target='_blank'>Details</a></td></tr></table>";
}
var cust_icon = new GIcon(G_DEFAULT_ICON);
cust_icon.image = "images/home.png";
// Set up our GMarkerOptions object
markerOptions = { icon:cust_icon};
var marker = new GMarker(latlng, markerOptions);
GEvent.addListener(marker, "click", function() {
map.closeInfoWindow();
marker.openInfoWindowHtml(contentString);
});
map.addOverlay(marker);
}
})();
}
if(emptyProp){
alert("No property found");
}
}
function getCurrentZoom() {
return map.getZoom();
}
function zoomChanged() {
var levelZoom = getCurrentZoom();
if(levelZoom <= 14){
//alert('Zoom Changed : '+levelZoom);
alert('You can not zoom out beyond this level for Draw Your Search Area.');
map.setZoom(14);
return false;
}else{
//alert('Zoom Changed : '+levelZoom);
return true;
}
}
</script>