11/15/2015

Easy, free ways to embed a Google Map on your web page -- No programming required!

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

"Washington, DC"
    center=Washington%2C%20DC

Example, image using this URL:

  https://maps.googleapis.com/maps/api/staticmap?size=500x350&center=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&center=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC&zoom=6



ex. Zoom level 16

  https://maps.googleapis.com/maps/api/staticmap?size=500x350&center=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&amp;center=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC&amp;zoom=14&amp;markers=color:red%7C1+Thomas+Circle+NW%2CDC






No comments :

Post a Comment