Latest-Tutorial » Aspx.NET Tutorials

Google Map Geocoding Tutorial with Example

Zeeshan Akhter — Fri, 22 Mar 2013 07:18:50 +0000

Google Map API has been a great way to show geographical information on web. A lot of mashup tools like this, have been created around Google Maps to show a wide variety of data. In my previous article about Introduction to Google Maps API, I had described basic APIs to integrate Google Map in your webpage. In this small article we will discuss a great feature of Google Maps API that can be used to locate any City/Country/Place on Map. This is called Geocoding.

Google Maps API provides a wonderful API called Geocoding API that enables you to fetch any location and pin point it on Google Map. GClientGeocoder is the class that we use to get the geocoder that get us the location. We will use getLatLng() method to get latitude/longitude of any location.
Check the following code.

var place = "New York";

geocoder = new GClientGeocoder();

geocoder.getLatLng(place, function(point) {

if (!point) {

alert(place + " not found");

} else {

var info = "

`"+place+"`

Latitude: "+point.y+" Longitude:"+point.x;

var marker = new GMarker(point);

map.addOverlay(marker);

marker.openInfoWindowHtml(info);

}

});

In above code snippet we passed string “New York” and a handler function to getLatLng() method of GClientGeocoder. GClientGeocoder class will call google server for the location and when it gets the result, it pass the result to the handler function that we specified. Thus handler function will get point (GPoint) object from which we can get the latitude and longitude of location. In above code we have created a marker and placed it on the map.

Online Demo

Google Map Reverse Geocode Example

Create your own Search Engine(Interface) using Google Custom Search API

Zeeshan Akhter — Fri, 22 Mar 2013 07:14:24 +0000

Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you.
Ring in Spring with Stunning Lingerie from Journelle and get $25 OFF purchases of $200 or more! Use promo code: SPRING200. Offer valid 2/22/13-4/30/13. Shop Now

I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.

DEMO

The Code

I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.

Step 1: Generate Google Search API Key and Include JavaScript

In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key.
Sign up for Google API Key

Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.

Primary

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>

<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>

<div class="data" id="web-content">div>

When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.

Step 3: JavaScript to call Google Search API

We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.

var webSearch;

webSearch = new google.search.WebSearch();

webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);

function webSearchComplete (searcher, searchNum) {

var contentDiv = document.getElementById('web-content');

contentDiv.innerHTML = '';

var results = searcher.results;

var newResultsDiv = document.createElement('div');

newResultsDiv.id = 'web-content';

for (var i = 0; i < results.length; i++) {

var result = results[i];

var resultHTML = '

';

resultHTML += '' +

result.titleNoFormatting + '

+

result.content +

'

';

newResultsDiv.innerHTML += resultHTML;

}

contentDiv.appendChild(newResultsDiv);

}

function search(query) {

webSearch.execute(query);

}

Click for Online Demo

Find Out Your Visitor’s Position Using HTML5 Geolocation

Zeeshan Akhter — Thu, 15 Mar 2012 07:33:40 +0000

Geolocation is a way for the user to retrieve their position and share where they are. This can be done in a few ways, by using a GPS as the one in your new smartphone or connected to your computer is the most precise method. But for users without GPS the browser will use your IP and or try to find nearby WLAN stations, however this is not as precise but gives some idea of where they are. Exactly how this is done is not a W3C standard and each browser have their own way to do it.

Even though geolocation is really complicated it’s quite easy for you to implement. In this tutorial I will show you how to retrieve the user’s position and display it on a map using Google Maps. So lets get started.

[wp_cart:Find Out Your Visitor’s Position Using HTML5 Geolocation:price:6:end]

Step 1. Create the HTML layout

We start of by creating a simple HTML page containing three div tags. One for the current status, one to display the data retrieved and one for displaying the user’s position on a map.

<html>

<head>

<title>HTML5 Geolocationtitle>


    <script src="http://maps.googleapis.com/maps/api/js?sensor=false">script>

  head>

  <body onload="initialize()">
    <div id="status">div>

    <div id="data">div>

    <div id="map_canvas" style="width: 640px; height: 480px">div>

  body>

html>

We also include the Google Maps API, it’s important to set sensors=false in the URL, otherwise Google will try to find out the user’s position for us.

The initialize function we’re calling on load will try to fetch the position for us.

Step 2. Retrieve the Position

Next it’s time to create our initialize function which will call the geolocation API to get the position data.

// Initialize geolocation

function initialize() {

if (navigator.geolocation) {

document.getElementById('status').innerHTML = 'Checking...';

navigator.geolocation.getCurrentPosition(

onSuccess,

onError, {

enableHighAccuracy: true,

timeout: 20000,

maximumAge: 120000

});

}

else {

document.getElementById('status').innerHTML = 'Geolocation not supported.';

}

First we check if the browser actually supports geolocation. Browser who supports geolocation are Internet Explorer 9, Firefox 3.5+, Chrome 5+, Opera 10.6+ and Safari 5+. So it’s quite widely supported already, but if the user has an old browser we show them a message telling them that geolocation is not supported.

Next we set the status message to “Checking…” to tell the user that we’re trying to fetch the location data since this might take some time. Then we call navigator.geolocation.getCurrentPosition which will try to retrieve the user’s position, it calls the onSuccess function if it succeeds, otherwise it will call the onError. These functions will be created in the next two steps.

There’s also a few optional parameters to the getCurrentPosition function. These are enableHighAccuracy which tells the web browser to try using the clients GPS if possible, the default value for this is false. The timeout parameter tells the browser how long we’re ready to wait to get the position in milliseconds, the default value is infinite. Lastly we have the maximumAge parameter which tells the browser how old the position cache is allowed to be in milliseconds, the default value for maximumAge is 0 which turns off cache completely.

Since geolocation is a big privacy concern the W3C standards requires the user to agree to share their position before the location is sent to the website, so when we call the getCurrentPosition a information bar will be shown to the user where the user has to allow us to get the position, if the user denies the onError will be function will be called.

Tip

Don’t rely fully on getting the user’s location since the user might deny your site from retrieving the position or something might go wrong. Always have a fallback solution if retrieving the position is critical.

Step 3. On Success

Next we add an onSuccess function to our script section. This function will display the data received and call the loadMap function to load our map.

// Map position retrieved successfully

function onSuccess(position) {

var data = '';

data += 'latitude: ' + position.coords.latitude +

'
'

;

data += 'longitude: ' + position.coords.longitude +

'
'

;

data += 'altitude: ' + position.coords.altitude +

'
'

;

data += 'accuracy: ' + position.coords.accuracy +

'
'

;

data += 'altitudeAccuracy: ' + position.coords.altitudeAccuracy +

'
'

;

data += 'heading: ' + position.coords.heading +

'
'

;

data += 'speed: ' + position.coords.speed +

'
'

;

document.getElementById('data').innerHTML = data;

loadMap(position.coords.latitude, position.coords.longitude);

}

This function is quite self explanatory, we build a string with the retrieved data found in the position variable and shows it to our user. You will always get the latitude, longitude and accuracy values but the rest is optional and will probably only be set if the user has a GPS which the data is retrieved from.

Lastly we call the loadMap function and give the latitude and longitude to show where the user is on a map.

Step 4. On Error

Since geolocation is quite complex a lot can go wrong and we need an error handler. There’s four different error codes, 0 is an unknown error, 1 occurs if you deny the browser from retrieving your location, 2 occurs if the browse somehow fails to retrieve the location and 3 if our timeout variable is too short and the timeout expired.

// Error handler

function onError(err) {

var message;

switch (err.code) {

case 0:

message = 'Unknown error: ' + err.message;

break;

case 1:

message = 'You denied permission to retrieve a position.';

break;

case 2:

message = 'The browser was unable to determine a position: ' + error.message;

break;

case 3:

message = 'The browser timed out before retrieving the position.';

break;

}

document.getElementById('status').innerHTML = message;

}

This function is also quite easy to understand, we get the error as a parameter to our function and shows the user a message depending on the error code retrieved.

Step 5. Display the Map

Next we display a map in our map_canvas div. This has really nothing to do with the HTML5 geolocation. So I won’t explain this for you, but it shouldn’t be too hard to understand.

Tip

If you want to learn more about Google maps check out their API here.

// Integration with google maps

function loadMap(lat, lng) {

var latlng = new google.maps.LatLng(lat, lng);

var settings = {

zoom: 14,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('map_canvas'), settings);

var marker = new google.maps.Marker({

position: latlng,

map: map,

title: 'Your Position!'

});

document.getElementById('status').innerHTML = 'Position Found!';

}

That’s all for today. You can try out or download the finished code below.

Example

Try out the finished example here: Example.

Download

Download the source from here: Download

Latest-Tutorial » Aspx.NET Tutorials

Google Map Geocoding Tutorial with Example

"+place+"

Online Demo

Create your own Search Engine(Interface) using Google Custom Search API

DEMO

DEMO

The Code

Step 1: Generate Google Search API Key and Include JavaScript

Step 2: Add HTML Container for Web Search

Step 3: JavaScript to call Google Search API

Click for Online Demo

Related articles

Find Out Your Visitor’s Position Using HTML5 Geolocation

Step 2. Retrieve the Position

Tip

Step 3. On Success

Step 4. On Error

Step 5. Display the Map

Tip

Example

Download

`"+place+"`