How can I put a Google Map on my website for free?
Google's Map instructions can be a bit confusing. To put a map on your page, there are many different methods available. Most are free for lower-traffic sites.
Google provides a lot of tools for website developers at the Google Maps API.
For HTML web pages, you'll want to use the Google Maps APIs for Web.
(The other options are for mobile device apps and requests from programs.)
There's 3 easy ways to insert a custom Google Map onto your HTML page. One of these does require an Google API Key, but the other two do not. These simple methods do not require latitude and longitude coordinates. Regular street addresses will do.
A. Build a Map
You can use the Quick Start Build a Map.
This first method does require you to register with Google and to request an "API Key." Not interested in that? Go to B or C below.
What you'll get is an interactive <iframe> that includes zooming, panning and marker(s). At the time of this writing, there are options for:
- A single address with marker.
- Search results for a type of location (eg. "Metro Stations in DC" or "Greek Restaurants in DC")
- Driving directions from one location to another.
- A Street View of an address.
- A map with no marker of an area.
B. Google MyMaps
If you have multiple addresses, and they are ordered in a spreadsheet-type CSV file, you can easily upload your data file to Google and have all your data points mapped at once.
This feature is called Google MyMaps. If you're working with a Google Business account, the administrator has to make Maps an available function. Otherwise, any Google account should have access to these features.
As of the time of this writing, these are the steps:
- Click on [Create a new map].
- A menu in the upper left allows you to name your saved map.
- Click the star if you want this map to be shared publicly on Google.
- Rename the default Layer to something a little more specific.
- Click on "Import" -- csv.xlsx, kml or gpx file can be uploaded or a Google Sheets document from your Google Drive.
- You data should be in 2 basic columns -- Name and Full Address. (Others can be used, but you don't want to include anything extraneous.)
- Select the columns you want to use.
- Choose one as the Name of the placemarks.
- Hit [Finish].
- Some addresses may not import properly and there is a way provided to clean the markers up before publishing.
- When done, you can hit the [Share] button and set the map to Public, Link only, or Specific people.
- To embed the map on your site, it must be Public.
- Click the 3-dot menu and choose "Embed on my site" to receive a bit of <iframe> code.
- Paste the <iframe> code into your own web page. You may change the height and width parameters.
C. Create a Static Image URL.
You can use the Static Maps API.
The examples on the Static Maps Guide say that you need an "API Key," but in reality you don't at this time. However, this might limit your site in some way (eg. only a certain number of working page views per day).
What you'll get is a URL for an <img> tag. This is not an interactive, scalable utility. It is just an image of whatever you choose.
The base URL for the map image is:
https://maps.googleapis.com/maps/api/staticmap?
Add some parameters after the question mark separated by ampersands.
Add a size parameter using "width x height" in pixels:
size=500x350
Add a center parameter for a text location. The location can be a city name, a place, or an address.
But, the text needs URL encoded -- meaning formatted in a certain way for the URL to work properly. There are numerous services online to help you encode a URL (exs. MyerWeb Encoder or W3Schools Encoder). Or, in a programming language, like PHP, you could use a function like: urlencode($myLocationText).
Example output:
"1600 Pennsylvania Ave NW, Washington, DC"
center=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC
"The White House, DC"
center=The%20White%20House%2C%20dc
center=Washington%2C%20DC
Example, image using this URL:
https://maps.googleapis.com/maps/api/staticmap?size=500x350¢er=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC
Add a zoom parameter. You can move in closer or further away using different levels of zoom -- 0 to 21.
ex. Zoom level 6
https://maps.googleapis.com/maps/api/staticmap?size=500x350¢er=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC&zoom=6
ex. Zoom level 16
https://maps.googleapis.com/maps/api/staticmap?size=500x350¢er=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC&zoom=18
Add a marker parameter.
There are numerous settings for markers -- colors, icons and other styles. I'm only going to go with a basic pin here.
The markers parameter receives several additional settings, and each of these settings is separated using a vertical pipe character: "|". However, the pipe needs to be URL encoded as "%7C."
A basic red pin set at a specific address (1 Thomas Circle NW,DC):
markers=color:red%7C1+Thomas+Circle+NW%2CDC
https://maps.googleapis.com/maps/api/staticmap?size=500x350&center=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC&zoom=14&markers=color:red%7C1+Thomas+Circle+NW%2CDC
Thanks for sharing such an important topic. To embed a Google Map on your web page is becoming important. Especially for the business, that is related to services, businesses, and food-related stuff. So your article is quite important, in that sense. URL encoded is necessary, the majority of people forget about that, which becomes the hurdle in the completion of the project.
ReplyDelete