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.

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 two possible ways:

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//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/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.

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/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!

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/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

Linking to Google Street View is tricky because the parameters have changed in the latest update. Using the Google Maps JavaScript API or Google Maps Embed API is still the best way to control Google Street View. However, you can get close with a simple link. Using ?layer=c will trigger Street View, but you’ll need to provide a latitude and longitude using the &cbll= parameter. Here’s an example:

Note: This will only get you close unless you use one of the APIs to determine the panoid you want. You used to be able to control the yaw, heading, zoom, and pitch with the &cbp= parameter, but as far as I’ve researched these options are no longer available with simple URL parameters.

HTML

http://maps.google.com/maps?layer=c&cbll=43.053522,-76.165687