Google Maps get coordinates on click or drag and drop

With this tutorial you’ll see how we can place a Google map with search box on your web page, and then get coordinates (i.e. latitude and longitude) based on where you click or where you drag and drop the marker into. The JavaScript API of Google Maps will help us achieve this.

This kind of map will be useful if you want to save coordinates from a Google map into your database. For example, if you’d like to save coordinates of a user-defined location, you can incorporate this map into your registration process — ask your users to point the marker to their location by clicking on the map or by dragging then dropping the marker.

There will be two types of icons in this map. First, a red default marker. Wherever you move it, we’ll get the coordinates that it points to. Second, white square markers which will appear to point to the location you searched for using the search box.

Map Demo

Try the map below — this is more or less how our map will look like later at the end of this tutorial. 🙂 Please read on and soon I’ll share the codes with you.

Get coordinates from Google Map

Latitude:   Longitude:


Click on any point or drag the marker to get coordinates.

 

This tutorial will cover the following:

  • Google map on a web page
  • Search box for map
  • Get map coordinates on click
  • Get map coordinates on drag and drop of the marker
And you will need these:

  • Familiarity with HTML and JavaScript
  • Internet connection
  • Google account
  • Development environment (I used XAMPP on Windows 7 for this)
  • Code editor (I use Sublime Text)


But the tutorial does not include the following yet:

  • Customized marker image
  • Set map coordinates based on field value

Get a key for Google Maps JavaScript API

Let’s begin by getting an API key for the Google map we’re about to embed.

Why get an API key?

Including a key in our API request lets us monitor our API usage in the Google Developers Console, lets us have per-key quota limits (instead of per-IP address), and lets Google contact us if there’s any issue regarding the application/project where we are using the map.

Instructions on getting API key for Google Maps

  1. Click here to go to Google Developers Console for registration of your application. You may choose to create a new project or use an existing one — it’s up to you. Skip step 2 if you want to use an existing project.
  2. Select “Create a new project” on the dropdown, then click Continue.
  3. Type the “Name” you want for this specific API key that we’re creating.
  4. Below the field for “Name”, there’s an optional field “Accept requests from these HTTP referrers (web sites)” but Google recommends that we fill this field too, especially when in production environment.You may leave this blank, but if you do, requests will be accepted from anywhere. What happens if requests are accepted from anywhere? Other websites may make a request using your API key and consume your quota.
  5. Click the “Create” button, and then you will see the API that has been generated for you. Copy the API key and save it. We’ll be using that soon.

Prepare codes

Let’s begin making a map that allows us to get coordinates on click or by drag and drop.

At the end of this post, I’ll provide a download link to the source code of the map. But before that, I’ll briefly show you the contents of the files.

index.php

Save as YOUR-FOLDER-PATH/index.php. You may save it as .html too.

IMPORTANT: Replace [YOUR-API-KEY] with the API key that you saved earlier.

Snippets from a JavaScript file that we’ll use later for the map

The variables at the beginning of the JavaScript are what I think would most likely be configured by you, and some other global variables. If you want to disable the “drag and drop” function, set drag_and_drop to false, and if you want to disable the placement of marker on click, set click_and_drop to false. Set your desired default coordinates value to latitude and longitude. If you don’t like the icon I chose for results from the Search Box, you may change it. You may refer to Google Map icons for markers. To use an icon that you like, just copy the path to the icon set, then append the icon’s file name. You can also modify the zoom value, depending on how close your view needs to be.

Here’s the placeMarker function. Pass the map coordinates to this function to place the marker into another location.

This is the initialize() function and would be the core function of our Google Map. I won’t explain the lines of code in this function anymore because there are already some comments between the lines of code.

And finally, go ahead and initialize the Google Map on your web page.

Your map should now look like the one on my sample map at the top of this page.

Download source code: Google map where you can get coordinates on click or drag and drop

Remember to replace [YOUR-API-KEY] in index.php with the API key you retrieved earlier.

Extract the files and move index.php as well as the assets folder where you want. You can also turn it into an HTML file index.html if you prefer not to run Apache for the .php file. An easy way to edit the extension from php to html is through FileZilla’s folder browser.

Then view your index in a web browser. Your map should look like the one in my demo.

Comments? Suggestions?

Feel free to suggest anything that will improve this tutorial. 🙂

Related Posts:

Posts that may be related to "Google Maps get coordinates on click or drag and drop":

Catzie

A Filipino programmer with a variety of interests such as baking, singing, making up silly song/rap lyrics, K-pop, drawing, creating unique dessert flavors, obsessing about finding out how some things works, board games, anime, video games, and forgetting things that usually go in her long list of interests. Running small-time online dessert shops Cookies PH and Catzie's Cakery.

One comment on “Google Maps get coordinates on click or drag and drop

 

  1. Great Script! Thanks a lot!
    Only suggestion I have is, it would be great if the search would send back the coords as well …
    Best, Bernd

Leave a Reply

Your email address will not be published. Required fields are marked *