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:
map.jpg
map1.jpg
Now we use the "index.cshtml" file for writing some script and HTML code. This file exists:
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);
  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. }
  33. google.maps.event.addDomListener(window, 'load', initialize);
  35. </script>
  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>
  46. </html>
There is various status code that returns the following values:
Execute the application by pressing "F5".
map3.jpg
Type any city into the TextBox for the search:
map4.jpg