Google Maps API – Location Picker Example

This is a simple tutorial on how to allow users to select a location via the Google Maps JavaScript API.

Overview of how the location picker will work:

  1. The map is loaded.
  2. The user plots a location marker by clicking on the map.
  3. If the marker is dragged or a different location is clicked, we change the position of the marker.
  4. Whenever the position of the marker is changed, we grab the latest latitude / longitude values.
  5. We store the latitude / longitude values in text fields so that we can easily save them as part of a form.

Our HTML:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          #map{ width:700px; height: 500px; }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <title>Save Marker Example</title>
    </head>
    <body>
        <h1>Select a location!</h1>
        <p>Click on a location on the map to select it. Drag the marker to change location.</p>
        
        <!--map div-->
        <div id="map"></div>
        
        <!--our form-->
        <h2>Chosen Location</h2>
        <form method="post">
            <input type="text" id="lat" readonly="yes"><br>
            <input type="text" id="lng" readonly="yes">
        </form>
        
        <script type="text/javascript" src="map.js"></script>
    </body>
</html>

As you can see, I have created a basic HTML page with a map canvas and a form. The actual logic will be contained in a JavaScript file called map.js.

//map.js

//Set up some of our variables.
var map; //Will contain map object.
var marker = false; ////Has the user plotted their location marker? 
        
//Function called to initialize / create the map.
//This is called when the page has loaded.
function initMap() {

    //The center location of our map.
    var centerOfMap = new google.maps.LatLng(52.357971, -6.516758);

    //Map options.
    var options = {
      center: centerOfMap, //Set center.
      zoom: 7 //The zoom value.
    };

    //Create the map object.
    map = new google.maps.Map(document.getElementById('map'), options);

    //Listen for any clicks on the map.
    google.maps.event.addListener(map, 'click', function(event) {                
        //Get the location that the user clicked.
        var clickedLocation = event.latLng;
        //If the marker hasn't been added.
        if(marker === false){
            //Create the marker.
            marker = new google.maps.Marker({
                position: clickedLocation,
                map: map,
                draggable: true //make it draggable
            });
            //Listen for drag events!
            google.maps.event.addListener(marker, 'dragend', function(event){
                markerLocation();
            });
        } else{
            //Marker has already been added, so just change its location.
            marker.setPosition(clickedLocation);
        }
        //Get the marker's location.
        markerLocation();
    });
}
        
//This function will get the marker's current location and then add the lat/long
//values to our textfields so that we can save the location.
function markerLocation(){
    //Get location.
    var currentLocation = marker.getPosition();
    //Add lat and lng values to a field that we can save.
    document.getElementById('lat').value = currentLocation.lat(); //latitude
    document.getElementById('lng').value = currentLocation.lng(); //longitude
}
        
        
//Load the map when the page has finished loading.
google.maps.event.addDomListener(window, 'load', initMap);

Drill-down of the code above (reading the comments in the code will make more sense):

  • After we initialized the map, we added a “click” event listener. As the name suggests, this event listener will listen for any clicks that are made on the map.
  • If there is a click on the map, we retrieve the location that the click occurred on.
  • We also set up a “dragend” event listener on the marker. This listener tells us when the marker has been dragged to a new location by the user.
  • Both of these event listeners call the markerLocation function, which stores the latitude and longitude values of the marker’s current location in our text fields.

Once the lat / lng values have been stored inside our text fields, we can easily save them by inserting them into a database.