Post
Ask Question

Using Google Maps in Web API

Introduction

 
This article explains the use of Google Maps in the Web API. This map contains the Country or City name. It does not contain the Latitude and Longitude. By using Google Maps we can search any Country and any City in the Country or all over the world.
 
The following is the procedure.
 
First, we create a web application as in the following:
  • Start Visual Studio 2012.
  • From the Stat window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click the "OK" button.
map.jpg
  • From the "MVC4 Project" window select "Web API".
map1.jpg
  • Click the "OK" button.
Now we use the "index.cshtml" file for writing some script and HTML code. This file exists:
  • In the "Solution Explorer".
  • Expand the folder "Home".
  • Select the "index.cshtml" file.
map2.jpg
 
Add the following code:
  1. <!DOCTYPE link href="https://maps/documentation/javascript/examples/default.css" rel="stylesheet" />  
  2. <html>  
  3.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>  
  4.     <script>  
  5.         var mapcode;  
  6.         var diag;  
  7.         function initialize() {  
  8.             mapcode = new google.maps.Geocoder();   
  9.             var lnt = new google.maps.LatLng(26.45, 82.85);  
  10.             var diagChoice = {  
  11.                 zoom: 9,  
  12.                 center: lnt,   
  13.                 diagId: google.maps.MapTypeId.ROADMAP   
  14. }   
  15.            diag = new google.maps.Map(document.getElementById('map-canvas'), diagChoice);   
  16.   
  17.         }  
  18.  function codeAddress() {  
  19.             var add = document.getElementById('address').value;  
  20.             mapcode.geocode({ 'address': add }, function (results, status) {  
  21.                 if (status == google.maps.GeocoderStatus.OK) {   
  22.                     diag.setCenter(results[0].geometry.location);   
  23.                     var hint = new google.maps.Marker({   
  24.                         diag: diag,  
  25.                         position: results[0].geometry.location  
  26.                     });  
  27.                 } else {  
  28.                     alert('This code is not successful ' + status);  
  29.                 }  
  30.             });  
  31.         }  
  32.   
  33.         google.maps.event.addDomListener(window, 'load', initialize);   
  34.   
  35.     </script>  
  36.   
  37.     <body>  
  38.         <div id="panel">  
  39.             <input id="address" type="textbox" value="New Delhi">  
  40.             <input type="button" value="Search" onclick="codeAddress()">  
  41.         </div>  
  42.         <div id="map-canvas" style="width: 600px; height: 390px; border: 5px solid #5E5454;">  
  43.         </div>  
  44.     </body>  
  45.   
  46. </html> 
     
There is various status code that returns the following values:
  • google.maps.GeocoderStatus.OK : This defines that the mapcode was successful.
  • google.maps.GeocoderStatus.ZERO_RESULT:  It defines that the mapcode was successful but there are no results. That happens when you pass a non-existing address.
  • google.maps.GeocoderStatus.OVER_QUERY_LIMIT : It defines that you are over your Quota.
  • google.maps.GeocoderStatus.INVALID_REQUEST: It defines that the query is missing, in other words, address.
  • google.maps.GeocoderStatus.REQUEST_DENIED : It defines that the user request is denied for some reason.
Execute the application by pressing "F5".
 
map3.jpg
 
Type any city into the TextBox for the search:
 
map4.jpg
 


Similar Articles