Geo-tag Your Photos Using ASP.NET and Google Maps: Part I

Getting Started with the Google Maps API

CoverStory

LANGUAGES: JavaScript | VB.NET

ASP.NET VERSIONS: 2.0

 

Geo-tag Your Photos Using ASP.NET and Google Maps: Part I

Getting Started with the Google Maps API

 

By Wei-Meng Lee

 

The Google Maps API is a free mapping service that allows you to embed maps into your Web pages using JavaScript. Besides displaying maps, Google Maps enables you to insert markers at landmarks of interest. This feature is very exciting because you can use it to associate photos with different geographical locations (a process known as geo-tagging). For example, you can display your vacation photos in Google Maps so that, besides viewing the photos, you know the exact location where you took the photos.

 

This two-part series demonstrates how to build an ASP.NET Web application that allows users to upload photos and geo-tag them using Google Maps. Part I shows you how to get started with the Google Maps API.

 

Using Google Maps

To use Google Maps, you must sign up for a Maps API key at http://www.google.com/apis/maps/signup.html. However, the key for which you apply is only valid for a particular directory on your Web server. For example, if you want to display a map on www.mysite.com/myApp/mypage.html, you must apply for a Maps API key for www.mysite.com/myApp/; this key will only work for the pages in this directory.

 

Note: Because the Google Maps API key is tied to the URL of your Web application, you cannot use Google Maps within a Windows application.

 

Creating the Application

Using Visual Studio 2005, create a new ASP.NET AJAX-enabled Web Site project and name it GoogleMaps. Once the project is created, press F5 to run it. The main purpose is to get the URL for the Web application so you can apply for a valid Maps API key for this application. I m using the built-in Web server that shipped with Visual Studio 2005, so my URL looks something like this: localhost:2139/GoogleMaps/. You ll most likely have a different port number (2139, in my case), but use your own URL to apply for a Maps API key.

 

Tip: For development purposes, it is good to set the Use dynamic ports property of the project to False so Visual Studio 2005 will always use the same port number for your project (set the port number in the Port number property; see Figure 1).

 


Figure 1: Use a static port number for your ASP.NET Web application.

 

Once you have a valid Maps API key, you can use Google Maps easily. Insert in the Source View of the Default.aspx page the

 

Figure 2: The