{"componentChunkName":"component---src-templates-blog-post-js","path":"/current-location-google-apis","result":{"data":{"markdownRemark":{"html":"

You can easily use Google API services to enable your web application to get current location and places around.

\n

\"gapi1\"

\n

Here's a simple guide:

\n

1. Create a new project

\n

Go to Google API Console and create a new project.

\n

\"gapi2\"

\n

2. Enable APIs

\n

You will be directed to the API Manager panel. In the API library, search for the required APIs and enable\nthem for your project. To get location, you would require the following location based APIs:

\n
* Google Maps JavaScript API\n* Google Maps Geocoding API
\n

\"gapi3\"

\n

3. Create API keys

\n

When enabling APIs, you will be directed to create the API keys for your project. In this task, you will only\nrequire a key for Google Maps JavaScript API. Created keys can be viewed in the Credentials panel.

\n

4. Load Google Maps JavaScript API.

\n

This should be done once the page loading has completed (the code has to be added at the end of the HTML code).\nEnter your generated API key and include Google Places as a library in the same URL. The initMap callback\nfunction is executed once the API is loaded.

\n
<script\n    src=\"https://maps.googleapis.com/maps/api/js?key=YOU_API_KEY&libraries=places&callback=initMap&language=en\"\n    async defer>\n</script>
\n

5. Add a map to your application.

\n

You can style the map element as required.

\n
<style>\n  #myPlacesMapView{\n    bottom: 0;\n    right: 0;\n    position: fixed;\n    z-index: 1;\n}\n  #map{\n    margin-top: 150px;\n    margin-left: 50px;\n    padding-top: 150px;\n    width: 600px;\n    height: 400px;\n    background-color: #5bc0de;\n}\n</style>\n\n<div id=\"myPlacesMapView\">\n     <div id=\"map\"></div>\n</div>
\n

6. Now define the callback function.

\n
function initMap() {\n    // Try HTML5 geolocation to get the current location \n    var pos;\n    if (navigator.geolocation) {\n        navigator.geolocation.getCurrentPosition(function (position) {\n                pos = {\n                    lat: position.coords.latitude,\n                    lng: position.coords.longitude\n                };\n                // Set current location as the center of the map and add a marker to the map\n                map = new google.maps.Map(document.getElementById(\"map\"), {\n                    center: {lat: position.coords.latitude, lng: position.coords.longitude},\n                    zoom: 14\n                });\n                marker = new google.maps.Marker({\n                    map: map,\n                    position: pos\n                });                \n                var infowindow = new google.maps.InfoWindow();\n\n                // Use geocoding to get the address of current location\n                var geocoder = new google.maps.Geocoder();\n                var latlng = new google.maps.LatLng(pos.lat, pos.lng);\n                geocoder.geocode({\n                        'latLng': latlng\n                    }, function (results, status) {\n                        if (status == google.maps.GeocoderStatus.OK) {\n                            if (results[0]) {\n                                var location = results[0];\n                                var address_main = location.formatted_address;\n                                placeID = location.place_id;\n                              \n                                // Use Places library to get the name and other details of current location\n                                var service = new google.maps.places.PlacesService(map);\n                                service.getDetails({\n                                        placeId: placeID\n                                    }, function (place, stat) {\n                                        if (stat == google.maps.places.PlacesServiceStatus.OK) {\n                                            var name = place.name;\n                                            infowindow.setContent('<div><strong>  You\\'re here:  ' + place.name + '</strong><br>' +\n                                                place.vicinity + '</div>');\n                                            infowindow.open(map, marker);\n                                        }\n                                    }\n                                );\n                            }\n                            else {\n                                alert(\"address not found\");\n                            }\n                        }\n                        else {\n                        }\n                    }\n                );\n            },\n            function () {\n                handleLocationError(true, map.getCenter());\n            }\n        );\n    } else {\n        // Browser doesn't support Geolocation\n        handleLocationError(false, map.getCenter());\n    }\n}\n\nfunction handleLocationError(browserHasGeolocation, infoWindow, pos) {\n    infoWindow.setPosition(pos);\n    infoWindow.setContent(browserHasGeolocation ?\n        'Error: The Geolocation service failed.' :\n        'Error: Your browser doesn\\'t support geolocation.');\n}
\n

When this is executed, your application will display a map with current location details.

\n

\"gapi4\"

\n

That's it! Happy coding!

","frontmatter":{"date":"February 10, 2017","path":"/current-location-google-apis","title":"Get Current Location using Google APIs","tags":["How to"]}}},"pageContext":{}},"staticQueryHashes":["3649515864"]}