1. Getting Started<\/h2>\n
Lets start by defining Google Map.
\n
\n
\n[ulp id=’8njY7i2QRy6sg8pg’]
\n
\nAccording to wikipedia, Google Maps is a web mapping service developed by Google . It offers satellite imagery, street maps , 360\u00b0 panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation.<\/p>\n
Another good but simpler definition below.<\/p>\n
Google map is a web based mapping service that provides access to up-to-date data or information about cities,states countries, continents or regions world wide. Simply put google maps allows us access different geographic data. Google Map provides access it its service through an API (Application Programming Interface).
\nWe can access this API in a number of ways:<\/p>\n
- \n
- Google Maps Javascript API: This allows you to access google maps service through javascript and according to its website it features a robust support.
\nTo learn more about the Javascript API Visit this tutorial <\/a><\/li>\n- Google Maps embed API: You do not need any working knowledge of javascript to access Google Map in this way because you do not need to write any code. Just enter the neccessary location and copy the given code.<\/li>\n
- Google Street View Image Api.<\/li>\n
- Google Static Map Api: Embed a map image without JavaScript or dynamic page loading. With this method you embed a map image and you dont need javascript to do it.<\/li>\n
- Google Places API Javascript Library: Up-to-date information about millions of locations.<\/li>\n<\/ul>\n
In this example we are going to develop web apps that use Google geocoding API.<\/p>\n
1.1 Google Geocoding<\/h3>\n
According to Google, Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map. The reverse is also possible, it is called reverse Geocoding.
\nReverse geocoding is the process of converting geographic coordinates into a human-readable address. The Google Maps Geocoding API’s reverse geocoding service also lets you find the address for a given place ID. Place IDs uniquely identify a place in the Google Places database and on Google Maps.<\/p>\n![\"Google](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/11\/map3.jpg\")
<\/a>Google Map Example<\/figcaption><\/figure>\n index.html<\/em><\/span><\/p>\n
<!DOCTYPE\u00a0html>\r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n #map {\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 400px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 100%;\r\n\u00a0 \u00a0 \u00a0 \u00a0}\r\n\t<\/style>\r\n\r\n\t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<!DOCTYPE\u00a0html>\r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n #map {\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 400px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 100%;\r\n\u00a0 \u00a0 \u00a0 \u00a0}\r\n\t<\/style>\r\n\r\n\t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n\r\n<body>\r\n<h1> Google Map Geocoding Example <\/h1>\r\n\r\n<form method=post action=\"index.php\">\r\n<select name=cali>\r\n<option value =\"1600+Amphitheatre+Parkway,+Mountain+View,+CA\">California<\/option>\r\n<\/select>\r\n<input type=submit name=button value=submit>\r\n<\/form>\r\n<?php\r\n}\r\n?>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nThe above html page contains a drop down list inside a form which has a single address. When the submit button is clicked, the form is submitted and the content of the Drop down list is transmitted to the server (to a script called index.php) .<\/p>\n
index.php<\/em><\/span><\/p>\n
<?php\r\nif(isset($_POST[\"button\"])){\r\n\t$lati=null;\r\n\t$longi=null;\r\n$address = $_POST[\"cali\"];\r\n$address = urlencode($address);\/\/properly encode the url\r\n\/\/ google map geocode api url\r\n$url = \"http:\/\/maps.google.com\/maps\/api\/geocode\/json?address={$address}\";\/\/we are getting the response in json\r\n\/\/ get the json response\r\n$resp_json = file_get_contents($url);\r\n\/\/ decode the json\r\n$resp = json_decode($resp_json, true);\r\n\/\/the response status would be 'OK', if are able to geocode the given address \r\nif($resp['status']=='OK'){\r\n\/\/ get the longtitude and latitude data\r\n$lat = $resp['results'][0]['geometry']['location']['lat'];\r\n$long = $resp['results'][0]['geometry']['location']['lng'];\r\n?>\r\n<div id=map style=\"width:100%;height:500px\">\r\n\r\n<\/div>\r\n<script async defer\r\nsrc=\"http:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=drawMap\"><\/script>\r\n<script>\r\n\u00a0 \u00a0 function drawMap() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 var pos = {lat: <?php echo $lat ?> , lng:<?php echo $long ?>};\r\n\u00a0 \u00a0 \u00a0 \u00a0 var map = new google.maps.Map(document.getElementById('map'), {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 zoom: 4,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 center: pos\r\n\u00a0 \u00a0 \u00a0 \u00a0 });\r\n\u00a0 \u00a0 \u00a0 \u00a0 var marker = new google.maps.Marker({\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: pos,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 map: map\r\n\u00a0 \u00a0 \u00a0 \u00a0 });\r\n\u00a0 \u00a0 \u00a0 }\r\n\r\n<\/script>\r\n<?php\r\n}\r\n}\r\nelse{\r\n\techo \"DID NOT RECEIVE LATITUDE AND LONGITUDE DATA\";\r\n}\r\n?>\r\n<\/pre>\nIn this script we process the content sent by the form (lines five and six) and call the geocoding API(lines eight to ten) and tell it to return the required data in json.<\/p>\n
$url = \"http:\/\/maps.google.com\/maps\/api\/geocode\/json?address={$address}\"\r\n<\/pre>\nIn line 22 we load the google map API, in order to draw the map on a browser.<\/p>\n
<script async defer\r\nsrc=\"http:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=drawMap\"><\/script>\r\n\r\n<\/pre>\n
The async attribute allows the browser to continue rendering the rest of your page while the API loads. We pass our API key and add a callback function. (The callback function is called after the script has loaded completely). \u00a0In this case the function name is drawMap.
\nIn line 26 we create an object which holds the coordinates of the region we want to be displayed. In line 27 we instatiate the map object. We pass our div tag, the zoom value and our coordinate object. In line 31 we create a marker object and pass our map to it. We have successfully used the google map geocoding API to draw a map.<\/p>\n2. Summary<\/h2>\n
In this example we learnt about Google Maps Geocoding API, how to use it to get the coordinates of a street or area and display on a map. We also learnt about the different ways we can access the Google Map service.<\/p>\n
3. Download the source code<\/h2>\n