Gearside Design

Easily Link to Locations and Directions Using the New Google Maps

Updates
May 11, 2014 Changed URL to maps.google.com, changed "My+Location" to "Current+Location", and added example links.
May 12, 2014 Removed "/preview" from some of the snippets which broke the directions link on mobile devices.
June 4, 2016 Added a note for including the traffic layer. Also added an example of linking to Google Street View.
May 18, 2017 Add the new Google Maps URLs API that was shown at Google I/O 2017.

Since the release of the new Google Maps API, there are some really powerful ways to create links from your site. These links could be a simple location, or they could be directions or even local searches. Here are some ideas of how to link to the New Google Maps.

There are multiple ways to link to the new Google Maps now, I will show a few different syntaxes to demonstrate alternate methods. The old method uses query strings, and is still supported, so I’ve showed them below, but the new method is listed first.

Place/Address

The most basic is a simple destination. This will link directly to an address. Here are three possible ways:

HTML

https://www.google.com/maps/search/?api=1&query=760+West+Genesee+Street+Syracuse+NY+13204
HTML

https://www.google.com/maps/place/760+West+Genesee+Street+Syracuse+NY+13204
HTML

https://maps.google.com?q=760+West+Genesee+Street+Syracuse+NY+13204

 

Directions (with empty starting point)

The following will link to an address and automatically focus the cursor on the starting location input. The user just types in where they are coming from and the directions are generated.

To add the traffic layer on any of these links, add this to the query string: &layer=t

HTML

https://www.google.com/maps/dir/?api=1
HTML

https://www.google.com/maps/dir//760+West+Genesee+Street+Syracuse+NY+13204
HTML

https://maps.google.com?daddr=760+West+Genesee+Street+Syracuse+NY+13204

 

Directions (with set starting point)

No user input is required as there is a starting and ending direction pre-propagated. Here are a few possible methods for doing so:

HTML

https://www.google.com/maps/dir/?api=1&origin=760+West+Genesee+Street+Syracuse+NY+13204&destination=314+Avery+Avenue+Syracuse+NY+13204
HTML

https://www.google.com/maps/dir/760+West+Genesee+Street+Syracuse+NY+13204/314+Avery+Avenue+Syracuse+NY+13204
HTML

https://maps.google.com?saddr=760+West+Genesee+Street+Syracuse+NY+13204&daddr=314+Avery+Avenue+Syracuse+NY+13204

 

Directions (detect user’s current location as starting point)

By simply including “Current Location” in the starting point input field, Google will detect the user’s location and automatically generate directions based on where they are right now. The string “My Location” can also work, but “Current Location” seems to have a higher success rate.

HTML

https://www.google.com/maps/dir/?api=1&destination=760+West+Genesee+Street+Syracuse+NY+13204

Note: As commenters have pointed out, translate “Current+Location” into your applicable language.

HTML

https://www.google.com/maps/dir/Current+Location/760+West+Genesee+Street+Syracuse+NY+13204
HTML

https://maps.google.com?saddr=Current+Location&daddr=760+West+Genesee+Street+Syracuse+NY+13204

 

Directions (with latitude / longitude coordinates)

Instead of using an address, you could also include latitude and longitude coordinates for the destination (or starting point). In this example, we’re also using “Current Location” as the starting point.

HTML

https://www.google.com/maps/dir/?api=1&destination=43.12345,-76.12345
HTML

https://www.google.com/maps/dir/Current+Location/43.12345,-76.12345
HTML

https://maps.google.com?saddr=Current+Location&daddr=43.12345,-76.12345

 

Directions (multiple destinations from set location)

Using the updated syntax, we can just keep adding destinations to the URL! Same using the new Google Maps URLs (separating waypoints with a bar).

HTML

https://www.google.com/maps/dir/?api=1&origin=760+W+Genesee+St+Syracuse+NY+13204&waypoints=314+Avery+Ave+Syracuse+NY+13204|9090+Destiny+USA+Dr+Syracuse+NY+13204
HTML

https://www.google.com/maps/dir/760+W+Genesee+St+Syracuse+NY+13204/314+Avery+Ave+Syracuse+NY+13204/9090+Destiny+USA+Dr+Syracuse+NY+13204

 

You could link to a search query of nearby places of an address or in this case coordinates. Change the “q=food” to whatever search you’d like. You can control the default zoom level with “,14z” or “&z=14 at the end of the URL (Zoom range is 0–19. 0 = Furthest Away, 19 = Closest In).

HTML

https://www.google.com/maps/search/?api=1&query=food+syracuse+ny
HTML

https://www.google.com/maps/search/food/43.12345,-76.12345,14z
HTML

https://maps.google.com?ll=43.12345,-76.12345&q=food&z=14

 

Destination Query

If you don’t know the address or GPS coordinates of the destination (or starting point for that matter), you could include a business name as the field instead and let Google determine what you mean. Obviously, you need to be careful with this one because it could serve a different location than you intend.

HTML

https://www.google.com/maps/dir/Current+Location/Pinckney+Hugo+Group
HTML

https://maps.google.com?saddr=Current+Location&daddr=Pinckney+Hugo+Group

 

Linking to Google Street View

The new Google Maps URLs allows for linking directly to Street View panoramas! Don’t forget to include the @ symbol in the URL.

HTML

https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=43.0534841,-76.1656329&heading=13&pitch=93&fov=80

 

Google Documentation

With the new Google Maps URL API, Google has introduced official documentation for these URLs. Click here for more example from Google.