Open In App
Related Articles

How to get user location using GoogleMapAPI ?

Improve Article
Save Article
Like Article

The Google Maps JavaScript API helps in creating and customizing maps in your own webpage contents. The API provides various type of maps like satellite maps, road maps, and many more which can be easily customized according to the programmer’s application requirements by changing styles, map layers,
events, and controls using its services and libraries. To display a map in your projects, Google Map API is used.

Note: To modify or use the above-mentioned features, the user has to get his own API KEY.


  1. Create your own API key by following steps in the developer’s console to access all Google Maps API. Save it in some notepad for future coding purposes.
  2. Refer images: Create new project for this.

  3. Set up OAuth Client ID..

Loading of map:

<script src=” ”></script>

It should be included in the head section of the code, make use of the API_KEY created above.

Example: In the following example, Javascript is used to implement the Google map API, HTML is used for the design of the webpage, and PHP used for all error reporting stuff and accessing of API KEYS. As a result, the current location/place’s latitude and longitude are shown on the map object with arrow markers.

// Replace with your own API KEY
define("API_KEY", "YOUR API KEY") 
<!DOCTYPE html>
<!-- Demo Styles -->
    body {
        margin: 0;
        padding: 0;
    body {
        background-color: #FFF;
        font-family: Helvetica, Arial,
            "Lucida Grande", sans-serif;
    #mapDivId {
        margin: 25px 10px;
        max-width: 640px;
        min-height: 380;
    #buttonID:disabled {
        background: #6c88d2;
    #buttonID {
        background: #33E6FF;
        border: #4633FF 2px solid;
        border-radius: 2px;
        color: #FFF;
        cursor: pointer;
        display: block;
        font-size: 0.8em;
        padding: 15px 35px;
        How to Get User Location 
        using Google Map API
    <div id="buttonDivID">
        <button id="buttonID" 
            Click for Location
    <div id="mapDivId"></div>
    <script src=
"<?php echo API_KEY; ?>&callback=initMap"
        async defer>
<script type="text/javascript">
        var map;
        function initMap() {
            /* Access of single map object instance*/
            var mapContainer = document
            var coordinates = new 
                google.maps.LatLng(17.457427, 78.284296);
            var defaultOptions = {
                center: coordinates,
                /* Setting the initial resolution */
                zoom: 4
            map = new google.maps.Map(
                    mapContainer, defaultOptions);
        }// end initMap() function
        function getLocation() {
                "buttonID").disabled = true;
                "buttonID").innerHTML = "Executing..";
            if ("geolocation" in navigator) {
                .getCurrentPosition(function (position) {
                    var currentLatitude 
                        = position.coords.latitude;
                    var currentLongitude 
                        = position.coords.longitude;
                    var infoLatLang = "Latitude: " 
                        + currentLatitude +
                        "<br>Longitude: " + 
                    var infoContent = 
                        new google.maps.InfoWindow
                        ({ map: map, content: infoLatLang });
                    var currentLocation = {
                        lat: currentLatitude,
                        lng: currentLongitude
                        .style.display = 'none';
        }// end function getLocation()


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 05 Nov, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials