Add option to display city in a separate input field so that it can be saved in the database separately

Author: imranhsayed

README.md

@@ -1 +1,19 @@
 # google-maps-javascript-api
+
+# Step-1-GET API KEY
+  https://console.cloud.google.com/apis/dashboard
+  https://developers.google.com/maps/documentation/javascript/tutorial
+  https://developers.google.com/maps/documentation/javascript/get-api-key
+
+# Step-2 Create Project   
+  When logged in to your google api dashboard Click on Credentials and Create Credentials ( Create Credentials > Api key ) for the above API
+get the API key
+
+#Step-3 ENABLE APIS:
+	Go to Api Library on https://console.cloud.google.com/apis/library and active the below API libraries:
+	1-Places API
+	2-Geocoding API
+	3-Google Maps API
+	
+	You can watch the demo on https://www.youtube.com/watch?v=yhhkNtdg5x0&list=PLD8nQCAhR3tT9dU8JKLpG3av-WMQGPPFP
+	For any help please contact me on http://imransayed.com

index.php

@@ -12,6 +12,7 @@
 <label for="">Address: <input id="map-search" class="controls" type="text" placeholder="Search Box" size="104"></label><br>
 <label for="">Lat: <input type="text" class="latitude"></label>
 <label for="">Long: <input type="text" class="longitude"></label>
+<label for="">City <input type="text" class="reg-input-city" placeholder="City"></label>
 
 <div id="map-canvas"></div>
 

javascript.js

@@ -1,17 +1,18 @@
 function initialize() {
 
 	var mapOptions, map, marker, searchBox,
-		infoWindow = '';
+		infoWindow = '',
 		addressEl = document.querySelector( '#map-search' ),
 		latEl = document.querySelector( '.latitude' ),
 		longEl = document.querySelector( '.longitude' ),
-		element = document.getElementById( 'map-canvas' );
+		element = document.getElementById( 'map-canvas' ),
+		city = document.querySelector( '.reg-input-city' );
 
 	mapOptions = {
 		// How far the maps zooms in.
 		zoom: 8,
 		// Current Lat and Long position of the pin/
-		center: new google.maps.LatLng( -34.397, 150.644 ),
+		center: new google.maps.LatLng( 18.5204, 73.8567 ),
 		// center : {
 		// 	lat: -34.397,
 		// 	lng: 150.644
@@ -86,11 +87,11 @@ function initialize() {
 	} );
 
 
-		/**
+	/**
 	 * Finds the new position of the marker when the marker is dragged.
 	 */
 	google.maps.event.addListener( marker, "dragend", function ( event ) {
-		var lat, long, address;
+		var lat, long, address, resultArray, citi;
 
 		console.log( 'i am dragged' );
 		lat = marker.getPosition().lat();
@@ -100,6 +101,16 @@ function initialize() {
 		geocoder.geocode( { latLng: marker.getPosition() }, function ( result, status ) {
 			if ( 'OK' === status ) {  // This line can also be written like if ( status == google.maps.GeocoderStatus.OK ) {
 				address = result[0].formatted_address;
+				resultArray =  result[0].address_components;
+
+				// Get the city and set the city input value to the one selected
+				for( var i = 0; i < resultArray.length; i++ ) {
+					if ( resultArray[ i ].types[0] && 'administrative_area_level_2' === resultArray[ i ].types[0] ) {
+						citi = resultArray[ i ].long_name;
+						console.log( citi );
+						city.value = citi;
+					}
+				}
 				addressEl.value = address;
 				latEl.value = lat;
 				longEl.value = long;
@@ -125,4 +136,4 @@ function initialize() {
 	});
 
 
-}
+}