When you want to share a location visually, a map is an effective way to do it. But with Google Maps Platform’s mapping options and even the consumer Google Maps apps, there are several approaches to consider. Choosing the right approach for you comes with different features, costs, and customization options. In this post, we’ll cover three popular options and explain when each makes sense to use. 

1. Generate a custom map link to send users to the right location on maps.google.com

2. Use the Static Maps API for a non-interactive snapshot of a location

3. Build a dynamic map with the Google Maps JavaScript API

We’ll start with the quickest, simplest map tool, then add a little more complexity with each example to show you the many ways you can customize your map.

**Use map links to share locations and directions**Every day, millions of people worldwide use Google Maps to find places to go and things to do while exploring the world around them. You can also use Google Maps Platform to create links to Google Maps. You can share locations or even complete directions–and it can be as easy as typing in the name of a place.

This minimalist option has the added advantage of being completely free, even at high volumes. There is no need for an API Key. And to customize, you only need to edit a query URL that redirects users to Google Maps. Mobile users are sent the location in the Google Maps app (if installed). Otherwise, the link opens in the browser. 

To share a map link, use the search path and include the location in the query parameter. There are various styles you can use to specify the location. For example:

• Search a landmark: https://www.google.com/maps/search/?api=1&query=golden%20gate%20bridge

• Provide an address: https://www.google.com/maps/search/?api=1&query=1000%20marine%20dr%20san%20francisco%20ca

• Use exact coordinates: https://www.google.com/maps/search/?api=1&query=37.811039,%20-122.477567

Note that the map links are all URL encoded, which formats spaces and other characters to easily be passed through URLs. While some browsers may encode the links automatically, it’s best to perform this yourself before sharing the map link.

Google Maps is often used for directions, so you can build origin and destination into your map link queries. Rather than using the query parameter, the same values can be included in the origin (where your directions begin) and destination (where your directions end) parameters. For example, let’s take the common tourist jaunt from the Golden Gate Bridge to Fisherman’s Wharf: https://www.google.com/maps/dir/?api=1&origin=37.811039,%20-122.477567&destination=fisherman%27s%20wharf

You can combine location types, as we’ve done here with coordinates as the origin and a landmark as destination. Or, try leaving the origin empty to include the user’s location (or allow them to enter it themselves). You can use map links in text messages, emails, or on your website within a hyperlink. Because all map links redirect to Google Maps, they aren’t the right choice to visualize locations on your own site. So let’s move on and cover a couple ways to create and display a map.

**Mark locations with the Maps Static API**Like the map links option, the Maps Static API also involves building a custom URL. Instead of sending the user directly to the URL, it’s used as the source in an HTML image tag. This allows you to mark a location on your website, without the need to re-route to Google Maps. 

Once you have an API key, the base URL to start with looks like this:

https://maps.googleapis.com/maps/api/staticmap?

After the question mark, you need to add these parameters (at a minimum, documentation lists more options):

• center: the coordinates or place name of the location where you want the map to be centered

• zoom: a value between 1 (world view) and 20 (building view)

• size: pixel width and height of the map {horizontal_value}x{vertical_value}

• key: your api key, which should be protected according to these best practices

For example, here's a map centered on San Francisco:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=San%20Francisco,CA&zoom=12&size=600x400&key=YOUR_API_KEY">

When added to your website’s HTML, you’ll see an image like this:

You can also add markers to the map to pinpoint locations with the markers parameter. Multiple locations can be separated with the | character. Here, we add a marker to the center, as well as the coordinates of the Golden Gate Bridge:

When added to your site, it will look like this:

The complete documentation has details on customized markers, paths, and more. The static map gives you control over exactly what is shown, which is good for projects that need to show a specific location. Since they produce a static image, these maps aren’t a good fit if users need to interact with the locations. So our next example shows how to add interactive maps using JavaScript.

**Create a custom dynamic map**If you’re comfortable with JavaScript, you can build custom maps with a lot of flexibility. The Maps JavaScript API allows you to create maps that are interactive, allowing users to zoom, pan, and click map locations. Similar to the Maps Static API, you’ll be able to add multiple markers to the map, but you’ll also get full programmatic access to the map. The JavaScript API lets you respond to clicks and customize the experience for your users.

To create your map:

1. Load the Google Maps API in a script tag

2. Create an empty <div> in your HTML with an id to reference the map in the DOM

3. Add some JavaScript to instantiate the map

You can find this basic map in this tutorial. It also includes step by step instruction to implement more advanced features like clickable icon overlays, automatic panning to specific locations, and custom image overlays.

Whether you’re looking to give your users a basic or interactive map experience, there’s a way to do it with Google Maps Platform–with plenty of tutorials and documentation to get you started and beyond. For more information on Google Maps Platform, visit our website.