IT Management

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

Getting Started with the Google Maps API

Wei-Meng Lee

October 30, 2009

12 Min Read

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 allowsyou to embed maps into your Web pages using JavaScript. Besides displayingmaps, Google Maps enables you to insert markers at landmarks of interest. Thisfeature is very exciting because you can use it to associate photos withdifferent geographical locations (a process known as geo-tagging). For example,you can display your vacation photos in Google Maps so that, besides viewingthe photos, you know the exact location where you took the photos.

This two-part series demonstrates how to build an ASP.NETWeb application that allows users to upload photos and geo-tag them usingGoogle 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 athttp://www.google.com/apis/maps/signup.html.However, the key for which you apply is only valid for a particular directoryon your Web server. For example, if you want to display a map onwww.mysite.com/myApp/mypage.html, you must apply for a Maps API key forwww.mysite.com/myApp/; this key will only work for the pages in this directory.

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

Creating the Application

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

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

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

Once you have a valid Maps API key, you can use GoogleMaps easily. Insert in the Source View of the Default.aspx page the element containing the JavaScript that will load the Google Maps, as shown inbold in Figure 2.  <head id="Head1" runat="server">  <title>UntitledPage</title>  <script src="http://maps.google.com/maps?file=api&   v=2&key=ABQIAAAA26ROxQdKhHJQA3ZbT3HkSBTWrCUD1_  1cGNyM6E4_IspVr1prIxQPz04xVq0xNfzxTGPpQ_lcCEcotQ"    type="text/javascript">

function load() {

if (GBrowserIsCompatible()) {

var map = newGMap2(document.getElementById("map"));

//---set the center point for the map---

map.setCenter(new

GLatLng(37.65528588731535,-122.40726470947265), 13);

}

Figure 2: The element containing the JavaScript that will load the Google Maps.   Note that you must replace the following:  key=ABQIAAAA26ROxQdKhHJQA3ZbT3HkSBTWrCUD1_1cGNyM6E4_IspVr1prIxQPz04xVq0xNfzxTGPpQ_lcCEcotQ   with your own key:  key=your_own_valid_Maps_API_key   Also, insert the following (shown in bold) in the <body>element so that, when the page is loaded, the JavaScript load function will beinvoked to load the Google Maps:  <body onload="load()">  <formid="form1" runat="server">   <div id="map" style="width: 500px; height:300px"></div>  </form> </body>   That s it! Press F5 to test the application. You shouldnow be able to see the Google Maps (see Figure 3).  <img width="333" height="268" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image004.gif"> Figure 3: Viewing Google Maps on theDefault.aspx page.  <h3>Map Navigation</h3> Now that you have Google Maps working, let s modify theapplication so we can get more out of Google Maps. (You ll find the onlinedocumentation of the API very useful as you dive deeper into the Google MapsAPI: <a href="https://www.google.com/apis/maps/documentation/reference.html#GMap2">http://www.google.com/apis/maps/documentation/reference.html#GMap2</a>.)   First, let s add two TextBox controls and one buttoncontrol to the Default.aspx page (see Figure 4). Figure 5 shows how theDefault.aspx page should now look.  <form id="form1" runat="server">  <divid="map" style="width: 500px; height: 300px">  </div>  Latitude <asp:TextBox ID="txtLatitude"runat="server"></asp:TextBox>    Longitude <asp:TextBox ID="txtLongitude"runat="server"></asp:TextBox>    <input id="btnGotoLocation"type="button"     value="Go to Location"onclick="goto_map_position()" />   </form> Figure 4: Add twoTextBox controls and one button control to the Default.aspx page.  <img width="333" height="266" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image006.gif"> Figure 5: The Design View ofDefault.aspx.   For the button control, I used the HTML Input elementinstead of the ASP.NET Button control. This is because I don t need a postbackto occur when the button is clicked. Instead, it will directly invoke theJavaScript goto_map_position function (as set in the onclick attribute) whenclicked.   Here are the new features to be added to our application: <ul><li>As the map is dragged, the latitude andlongitude will be updated on the two TextBox controls. </li><li>You can also go to a specific location byentering the latitude and longitude of the new location and clicking the Go toLocation button. </li></ul>   Back in the Source View of Default.aspx, move thedeclaration of the map variable to the top, making it a global variable:  <script type="text/javascript"> var map = null;   Next, rewrite the load function as shown in Figure 6.  function load() { if(GBrowserIsCompatible()) {   map = new GMap2(document.getElementById("map"));    //---displaynavigational controls---   map.addControl(newGSmallMapControl());   //---displayMap/Satellite/Hybrid---   map.addControl(newGMapTypeControl());   //---fired when the mapis dragged---   GEvent.addListener(map,"moveend",       function()      {          var center =map.getCenter();         //---update thelat and lng in the TextBox controls---         document.forms[0].txtLatitude.value = center.lat();         document.forms[0].txtLongitude.value = center.lng();      }    );    //---display aparticular location on the map---   map.setCenter(new      GLatLng(37.65528588731535, -122.40726470947265), 13);  } }Figure 6: Rewritethe load function.   The load function essentially adds to the map thenavigation controls, as well as the types of map controls. You then add anevent handler (moveend) so that when the user employs the mouse to drag themap, you ll display the latitude and longitude information in the two TextBox controlswhen they release the mouse button. Note that the latitude and longitudeinformation displayed always refers to the center of the map.   Figure 7 shows that the changes made in the load functionwill cause the map to display the navigational controls, as well as thedifferent types of maps from which you can choose (Map, Satellite, or Hybrid).  <img width="333" height="233" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image008.gif"> Figure 7: Displaying the additionalcontrols on the map.   Next, define the goto_map_position function, which isinvoked when the user clicks the Go to Location button:  //---navigate to a particular location---function goto_map_position(){ //---extract the lat andlng from the TextBox controls--- var lat =document.forms[0].txtLatitude.value;  var lng =document.forms[0].txtLongitude.value;  map.panTo(newGLatLng(lat,lng)); }   The goto_map_position function moves the map to thelocation specified using the panTo method.   To test the application, press F5 in Visual Studio 2005.Drag the map and observe the change in the latitude and longitude information.To centralize a location on the map, double-click on the location and theselected location will appear in the center of the map (see Figure 8).  <img width="333" height="311" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image010.gif"> Figure 8: Navigating to a particularlocation.  <h3>Adding a Marker to the Map</h3> Now that you ve successfully loaded Google Maps on yourpage, let s add some new interesting features to it. You can add a marker to alocation so you can use it as a reference point. To do so, let s first definethe AddMarker JavaScript function:  function AddMarker(){  //---set the location toadd the photo---  var centerPoint = newGPoint(     document.forms[0].txtLongitude.value,      document.forms[0].txtLatitude.value);   //---create a new markerobject---  var marker = newGMarker(centerPoint);   //---add the marker---  map.addOverlay(marker); }   The AddMark function creates a marker, then adds it to themap using the latitude and longitude specified in the two TextBox controls. Next,add the AJAX ScriptManager control to the top of the page and set itsEnablePartialRendering attribute to true:  <body onload="load()">    <form id="form1"runat="server">       <asp:ScriptManager ID="ScriptManager1"runat="server"       EnablePartialRendering="true">      </asp:ScriptManager>       <div id="map"style="width: 500px; height: 300px">      </div>   Insert an UpdatePanel control on the page; within its <ContentTemplate>element, add an Add Marker button:   <inputid="btnGotoLocation" type="button"    value="Go toLocation" onclick="goto_map_position()" />      <asp:UpdatePanelID="UpdatePanel1" runat="server">      <ContentTemplate>          <asp:ButtonID="btnAddMarker" runat="server"             Text="Add Marker"Width="104px"             OnClientClick="AddMarker()" />     </ContentTemplate>  </asp:UpdatePanel> </form>   Notice that I ve used a Button control instead of the HTMLInput element. Either method is acceptable. For the Button control, set theOnClientClick attribute to AddMarker so it will invoke the AddMarker functionwhen clicked. Figure 9 shows how the page should look.  <img width="247" height="190" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image012.gif"> Figure 9: Default.aspx with the newcontrols added.   Press F5 in Visual Studio 2005 to test the application.Select a location and click the Add Markerbutton; you ll notice that Google Maps displays an icon at the locationselected (see Figure 10).  <img width="333" height="321" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image014.gif"> Figure 10: Adding a marker to themap.   Besides adding an icon to represent the marker, you canalso display a balloon when the marker is clicked. To do so, add an eventhandler to the marker using the GEvent.addListener method (see Figure 11).  function AddMarker(){  //---set the location toadd the photo---  var centerPoint = newGPoint(     document.forms[0].txtLongitude.value,      document.forms[0].txtLatitude.value);   //---create a new markerobject---  var marker = newGMarker(centerPoint);   //---add the click event for the marker---  GEvent.addListener(marker,"click",   function() {     //---open the marker info tab---     marker.openInfoWindowHtml("Marker 1");   });   //---add the marker---  map.addOverlay(marker); }Figure 11: Add anevent handler using the GEvent.addListener method to display a balloon when themarker is clicked.   When the marker is clicked, it will display the contentspecified as the argument for the openInfoWindowHtml method (from the markerobject). The openInfoWindowHtml method takes in a single parameter, which canbe plain text or an HTML string. Figure 12 shows the marker displaying aballoon showing the text Marker 1 .  <img width="333" height="321" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image016.gif"> Figure 12: Displaying a balloon on amarker.   When you click elsewhere on the map, the balloon willdisappear. To view the balloon again, click on the marker. You can alsoorganize into tabs the information displayed in the balloon (see Figure 13); Figure14 shows the balloon organized into two tabs.  function AddMarker(){  var infoTabs = [        new GInfoWindowTab("Tab 1","Content for tab 1"),      new GInfoWindowTab("Tab 2","Content for tab 2")   ];   //---set the location toadd the photo---  var centerPoint = newGPoint(     document.forms[0].txtLongitude.value,      document.forms[0].txtLatitude.value);   //---create a new markerobject---  var marker = newGMarker(centerPoint);   //---add the click event for the marker---  GEvent.addListener(marker,"click",   function() {     //---open the marker info tab---     marker.openInfoWindowTabsHtml(infoTabs);   });   //---add the marker---  map.addOverlay(marker);   //---open the markerinfo tab---  marker.openInfoWindowTabsHtml(infoTabs); }Figure 13: Organizeinto tabs the information displayed in the balloon.  <img width="333" height="321" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image018.gif"> Figure 14: Displaying tabs in amarker.   You can drag the marker to another position after addingit to the map. To do so, you must specify that the marker is draggable at thetime you create the marker object. You also need to add two event handlers,dragstart and dragend. The dragstart event is fired when the marker is dragged(with the mouse button down). The dragend event is fired when the user releasesthe mouse button. As shown in Figure 15, when the user starts to drag themarker, I ll hide the balloon and display another balloon when the userreleases the mouse button. Figure 16 shows the marker before and afterdragging.  function AddMarker(){  var infoTabs = [                                newGInfoWindowTab("Tab 1", "Content for tab 1"),      newGInfoWindowTab("Tab 2", "Content for tab 2")   ];   //---set the location toadd the photo---  var centerPoint = newGPoint(     document.forms[0].txtLongitude.value,      document.forms[0].txtLatitude.value);   //---create a new draggable marker object---  var marker = new GMarker(centerPoint,{draggable: true});  //---add the click eventfor the marker---  GEvent.addListener(marker, "click",   function() {     //---open the markerinfo tab---     marker.openInfoWindowTabsHtml(infoTabs);   });  //---start dragging---  GEvent.addListener(marker,"dragstart", function() {     map.closeInfoWindow();  });   //---end dragging---  GEvent.addListener(marker, "dragend",function() {     marker.openInfoWindowHtml("Markermoved!");   });   //---add the marker---  map.addOverlay(marker);   //---open the markerinfo tab---  marker.openInfoWindowTabsHtml(infoTabs); }Figure 15: The dragstartand dragend event handlers.  <img width="333" height="161" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image020.gif"> Figure 16: Moving a marker.   Because the content for the balloon can take in an HTMLstring, you can easily insert images into the balloon by using the <img>HTML element. The example in Figure 17 inserts into the balloon a picture fromanother site; Figure 18 shows how the balloon looks.  function AddMarker(){  //---HTML for displaying the photo---  var content = '<img width="300"Height="210"      src="http://www.visitingdc.com/images/       golden-gate-bridge-picture.jpg"/>';    var infoTabs = [      new GInfoWindowTab("Tab 1",content),      newGInfoWindowTab("Tab 2", "Content for tab 2")   ];   //---set the location toadd the photo---  var centerPoint = newGPoint(     document.forms[0].txtLongitude.value,      document.forms[0].txtLatitude.value);   var marker = newGMarker(centerPoint, {draggable: true});  //---add the click eventfor the marker---  GEvent.addListener(marker, "click",   function() {     //---open the markerinfo tab---     marker.openInfoWindowTabsHtml(infoTabs);   });  //---start dragging---  GEvent.addListener(marker, "dragstart", function() {     map.closeInfoWindow();  });   //---end dragging---  GEvent.addListener(marker, "dragend", function() {     marker.openInfoWindowHtml("Markermoved!");   });   //---add the marker---  map.addOverlay(marker);   //---open the markerinfo tab---  marker.openInfoWindowTabsHtml(infoTabs); }Figure 17: Insertimages into the balloon by using the <img> HTML element.  <img width="333" height="412" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image022.gif"> Figure 18: Displaying an image in amarker balloon.  <h3>Searching for Locations</h3> Another useful feature to add to Google Maps is theability to search for locations. To demonstrate how, add the following HTML inthe Source View of Default.aspx:  <ContentTemplate>      <asp:Button ID="btnAddMarker"runat="server"       Text="AddMarker" Width="104px"       OnClientClick="AddMarker()" />        Enter address to search:    <asp:TextBox ID="txtAddress"runat="server">    </asp:TextBox>    <asp:Button ID="btnSearch"runat="server" Text="Search"       Width="104px"OnClientClick="findAddress()" /> </ContentTemplate>   Next, declare the geocoder object as follows:  <script type="text/javascript"> var map = null; var geocoder = newGClientGeocoder();   Then, define the findAddress JavaScript function, as shownin Figure 19.  function findAddress() { //---get the address tosearch for--- var address =document.forms[0].txtAddress.value;  geocoder.getLatLng(address,    function(point) {      //---if address isnot found---      if (!point) {         alert(address +" not found");       } else {         //---addressfound---         map.setCenter(point, 13);          //---create a newmarker---         var marker = newGMarker(point);          //---close themarker if it is clicked---         GEvent.addListener(marker, "click", function() {            if (marker) {               //---closethe balloon---               map.closeInfoWindow();               //---removethe marker---               map.removeOverlay(marker);             }         });         //---add themarker---         map.addOverlay(marker);          //---display theaddress---         marker.openInfoWindowHtml("Found: " + address);       }    }  ); }Figure 19: Definethe findAddress JavaScript function.   The findAddress function searches for a specified addressusing the getLatLng method from the geocoder object. Because the search maytake some time, you need to define a function so it can process the returningresult later. The found address is returned as a point object, which you willuse to add a marker on the map. In addition, you ll display in the markerballoon a message indicating the found location. Figure 20 shows the markeradded to the map when I searched for Empire State Building .  <img width="333" height="413" src="https://www.itprotoday.com/content/legacy/images/asp200710wl_f_image024.gif"> Figure 20: Searching for the addressof the Empire State Building.  <h3>Conclusion</h3> You ve now seen the basics of how to get started with theGoogle Maps API. The Google Maps API offers much more than what I can possiblydescribe in this space. As you become comfortable with it, check out thedocumentation and explore the rest of what the API offers. In Part II, you lllearn how to geo-tag your photos using Google Maps.   The source code accompanyingthis article is available for download.  Wei-Meng Lee (<a href="https://weimenglee.blogspot.com/">http://weimenglee.blogspot.com</a>) is aMicrosoft MVP and founder of Developer Learning Solutions (<a href="https://www.learn2develop.net/">http://www.learn2develop.net</a>), atechnology company specializing in hands-on training on the latest Microsofttechnologies. He is an established developer and trainer specializing in .NETand wireless technologies. Wei-Meng speaks regularly at internationalconferences and has authored and co-authored numerous books on .NET, XML, andwireless technologies. He writes extensively on topics ranging from .NET to MacOS X. He is also the author of.NET CompactFramework Pocket Guide, ASP.NET 2.0: ADeveloper s Notebook (both from O Reilly Media, Inc), and Programming Sudoku (Apress).

About the Author

Wei-Meng Lee

See more from Wei-Meng Lee

Related Topics

Recent in Cloud

Related Topics

Recent in OS

Related Topics

Recent in IT Mgmt

Related Topics

Recent in Career

Related Topics

Recent in Storage

Related Topics

Recent in Security

Related Topics

Recent in Dev

Related Topics

Recent in DX

Related Topics

Recent in Infrastructure

Related Topics

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

Using Google Maps

Creating the Application

About the Author

Editor's Choice

Featured Technical Explainers

Recent What Is

Related Topics

Recent in Cloud

Related Topics

Recent in OS

Related Topics

Recent in IT Mgmt

Related Topics

Recent in Career

Related Topics

Recent in Storage

Related Topics

Recent in Security

Related Topics

Recent in Dev

Related Topics

Recent in DX

Related Topics

Recent in Infrastructure

Related Topics

<span class="ArticleBase-LargeTitle">Geo-tag Your Photos Using ASP.NET and Google Maps: Part I</span>Geo-tag Your Photos Using ASP.NET and Google Maps: Part I

Using Google Maps

Creating the Application

About the Author

Editor's Choice

Featured Technical Explainers

Recent What Is

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