RSS

Monthly Archives: July 2012

How to Autocomplete world Cities

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="public/css/jquery.autocomplete.css" rel="stylesheet">
<script src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery.autocomplete.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#city").autocomplete("http://ws.geonames.org/searchJSON", {
dataType: 'jsonp',
parse: function(data) {
var rows = new Array();
data = data.geonames;
for(var i=0; i<data.length; i++){
rows[i] = { data:data[i], value:data[i].name, result:data[i].name };
}
return rows;
},
formatItem: function(row, i, n) {
return row.name + ', ' + row.adminCode1;
},
extraParams: {
// geonames doesn't support q and limit, which are the autocomplete plugin defaults, so let's blank them out.
q: '',
limit: '',
featureClass: 'P',
style: 'full',
maxRows: 50,
name_startsWith: function () { return $("#city").val() }
},
max: 50
});

});
</script>
</head>

<body>
<form action="search.php" method="get" id="search_form">
What
<input type="text"  name="q" id="q">
Where
<input type="text"   name="city" id="city">
<button type="submit"  name="btnSearch" id="btnSearch">Search</button>
</form>
</body>
</html>


 
Leave a comment

Posted by on July 19, 2012 in Geo Programming, JavaScript, jQuery

 

Tags:

Reverse Geocode with Google Map – PHP


<?php
// Get STATE from Google GeoData
function reverse_geocode($address) {
$address = str_replace(" ", "+", "$address");
$url = "http://maps.google.com/maps/api/geocode/json?

address=$address&sensor=false";
$result = file_get_contents("$url");
$json = json_decode($result);
foreach ($json->results as $result)
{
foreach($result->address_components as $addressPart) {
if((in_array('locality', $addressPart->types)) &&

(in_array('political', $addressPart->types)))
$city = $addressPart->long_name;
else if((in_array('administrative_area_level_1',

$addressPart->types)) && (in_array('political', $addressPart->types)))
$state = $addressPart->long_name;
else if((in_array('country', $addressPart->types)) &&

(in_array('political', $addressPart->types)))
$country = $addressPart->long_name;
}
}

if(($city != '') && ($state != '') && ($country != ''))
$address = $city.', '.$state.', '.$country;
else if(($city != '') && ($state != ''))
$address = $city.', '.$state;
else if(($state != '') && ($country != ''))
$address = $state.', '.$country;
else if($country != '')
$address = $country;


return "$country/$state/$city";
}


$myLocation = reverse_geocode("Arboretum Rd, Stanford, CA 94305, USA");
echo "$myLocation";

?>
 
Leave a comment

Posted by on July 17, 2012 in Geo Programming, PHP

 

Reverse Geocode using Google Map – JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function reverse()
{
var lat = parseFloat(7.4706);
var lng = parseFloat( 80.0456);
var latlng = new google.maps.LatLng(lat, lng);
geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
if (results[1]) {
var indice=0;
for (var j=0; j<results.length; j++)
{
if (results[j].types[0]=='locality')
{
indice=j;
break;
}
}

console.log(results[j]);
for (var i=0; i<results[j].address_components.length; i++)
{
if (results[j].address_components[i].types[0] == "locality") {
//this is the object you are looking for
city = results[j].address_components[i];
}
if (results[j].address_components[i].types[0] == "administrative_area_level_1") {
//this is the object you are looking for
region = results[j].address_components[i];
}
if (results[j].address_components[i].types[0] == "country") {
//this is the object you are looking for
country = results[j].address_components[i];
}
}


alert(city.long_name + " || " + region.long_name + " || " + country.short_name)


}


} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>

<body onLoad="reverse()">

</body>
</html>

 

 
Leave a comment

Posted by on July 17, 2012 in Geo Programming, JavaScript

 

Display Information Window in Google Map

Demo

<!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" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>codezone4 - Google Maps Simple Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function initialize()
{
var latlng = new google.maps.LatLng(9.931544168615512,76.27632894178791);
var opt =
{
center:latlng,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan:false,
navigationControl:true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
var map = new google.maps.Map(document.getElementById("map"),opt);
var marker= new google.maps.Marker({
position: new google.maps.LatLng(6.9167,79.8333),
title: "codeZone4 Base",
clickable: true,
map: map
});


var infowindow = new google.maps.InfoWindow(
{
content: " We are here! "

});


google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});



}

</script>
</head>
<body onload="initialize()">
<div id="map" style="width:400px;height:300px;margin-top:10px;"></div>
</body>
</html>
 
Leave a comment

Posted by on July 9, 2012 in Geo Programming, JavaScript

 

Tags: ,