Showing posts with label Google Maps. Show all posts
Showing posts with label Google Maps. Show all posts

11 December, 2010

How to get Lattitude and Longitude from Address using Google Maps

We can easily locate store using Goolge Maps Geocoder.
Google Maps uses REST method for accessing the services.

Our code uses cURL to locate stores using Google Maps API geocoder,
to query HTTP based geocoding API and SimpleXML to parse the
returned response. So, following code can be used to get the lattitude
and longitude of an address using google Maps Geocoder.

Lets start with the code using cURL for request. The cURL request
returns an XML in fact KML response on valid request.

$apiKey = "your_api_key_for_google_maps";
$address = "your_address";
$city = "your_city";
$state = "your_state_prefix";
$zip = "your_zip_code";

$url = "http://maps.google.com/maps/geo?output=xml&key=$apiKey&q=";
$query = $address.",".$city.",".$zip;
$url .= urlencode($query);

//initialize rhte curl object
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);


Now its time to parse the XML response using PHP's SimpleXML.

$xmlResponse = simplexml_load_string($response);

//check if the status code in response is 200, i.e. OK
if($xmlResponse->Response->Status->code == 200) {
foreach($xmlResponse->Response as $response) {
foreach($response->Placemark as $place) {
$latLngArr = explode(",", $place->Point->coordinates);
$lattitude = $latLngArr[0];
$longitude = $latLngArr[1];
}
}
}

In this way we can find lattitude and longitude of an address
using Google Maps geocoder feature.

How to display tabs in Google Maps Info Window

Google MAPS API have added lots of tab related features to its info windows.
We can use multiple tabs in one info windows, and this can be changed
using different GInfoWindow methods provided be the API.
So displaying tabs in Google Maps Info Window is really a simple task.

Following code snippet creates an info window with two tabs in it.

Lets first create a container for our map.

var oMap = new GMap2(document.getElementById("divMap"));


Now, check if our browser supports Google Maps

if(GBrowserIsCompatible()) {
var oMap = new GMap2(document.getElementById("divMap"));
}


Now lets initialize the map to a specific area, this can be done as:

//the setCenter function accepts two arguments, one is the point
//calculated from lattitude & longitude, and second is the
//zoom level
if(GBrowserIsCompatible()) {
var oMap = new GMap2(document.getElementById("divMap"));
oMap.setCenter(new GLatLng(82, -110), 3);
}


Now lets add controls to our map. Google Maps API provides different
control functions, but we will be adding just two of those.

if(GBrowserIsCompatible()) {
var oMap = new GMap2(document.getElementById("divMap"));
oMap.addControl(new GSmallMapControl());
oMap.addControl(new GMapTypeControl());
oMap.setCenter(new GLatLng(82, -110), 3);
}


Now lets add a marker in our map. Markers in Google Maps are
the simplest among provided overlays.

if(GBrowserIsCompatible()) {
var oMap = new GMap2(document.getElementById("divMap"));
oMap.addControl(new GSmallMapControl());
oMap.addControl(new GMapTypeControl());
oMap.setCenter(new GLatLng(82, -110), 3);

marker = new GMarker(new GLatLng(82, -110));
oMap.addOverlay(marker);
}


Lastly lets add a tabbed info window now.

if(GBrowserIsCompatible()) {
var oMap = new GMap2(document.getElementById("divMap"));
oMap.addControl(new GSmallMapControl());
oMap.addControl(new GMapTypeControl());
oMap.setCenter(new GLatLng(82, -110), 3);

marker = new GMarker(new GLatLng(82, -110));
oMap.addOverlay(marker);

var tabInfos = [
new GInfoWindowTab("First Tab", "Contents for first tab."),
new GInfoWindowTab("Second Tab", "Contents for second tab."),
new GInfoWindowTab("Third Tab", "Contents for third tab.")
];

marker.openInfoWindowTabsHtml(tabInfos, {
selectedTab: 1, //first tab will be selected
maxWidth: 320 //max width of info window
});
GEvent.addListener(marker, 'click', function () {
marker.openInfoWindowTabsHtml(tabInfos);
});
}

And that's it.