3 Ways to Embed a Google Map into Your Website

3 Ways to Embed a Google Map into Your Website 

 

There are several methods to embed a Google Map into your website. The most appropriate will depend on how much you need the map to do.

 

A Single Pin A Map with Multiple Pins and Unique Icons

A Map which Automatically Updates


Just A
 Single Pin on a Map? 

If your looking to simply embed a store or single location Google offers an embedding tool within Google Maps itself which is great.  

However, if you have multiple locations or want any customization you will need to look elsewhere. 

Steps:

  1. Open Google Maps and search for the address/company you want to show. 
  2. Once the location has been marked by the search, go into the ‘Share’ option found directly below the locations image.  
  3. Inside share you will find two tabs, open the ‘embed a map tab’. This display should now show you a copy of what your embedded map will look like on your website. Note that you can change the size of the map by using the drop down on the left side of the box. It is default ‘Medium’.  
  4. Once your satisfied with your maps size click the ‘copy html’ button.  
  5. Now that you have the html your next step depends very heavily on what web builder program you are using.  

 

Wix and Weebly both offer a drop and drag field for embedding html/code which is a matter of dragging and placing the box where you want before pasting the html you just copied. 

 

WordPress alternatively requires a few more steps and if you don’t have any HTML coding skill you may wish to send the html code onto your web designer to finish the job off. If not the steps are: 

  1. Access your site’s WordPress backend at /admin.  
  2. Identify the page or blog post that you would like to embed your map into and go to edit the page. 
  3. Go to the ‘Text’ tab for your content section, find where in the html code of your existing content on the page you want the map and paste the html.  

 

With these steps completed you should now have a basic Google Maps embedded into your page.  

 


 

Multiple Pins, Unique Colored Icons, and Drawing?

 

 

If you are looking for customizable pins, unique pin popups, drawing, or simply the ability to have more then one pin, Google offer a system called Google My Maps.

This tool is great for maps that you are going to build once and rarely update again.

If you are looking for something that needs to be tied to your internal systems or updated regularly this is not for you.

Steps:

  1. Go to Google My Maps and login to the system with a google account, if you don’t have one just follow-up the account creation process don’t worry as there is no fees with this.
  2. Now inside the program click – Create A New Map
  3. Once created you will see a map very similar to Google Maps which a few differences, the most significant of these are the pin and three dot symbols just below the search box. These two buttons will allow you to add as many pins and drawings as you would like. There is little more to the system which you can learn about here.
  4. Once your map has been created you need to position your view to be what you would like your embedded map to show.
  5. When your positioned, click the share button found on the left side bar. Look for the section stating who has access to your map and change it from private to public before pressing done.
  6. Now press the 3 dots at the top of the left box and choose the ‘embed on my site’ option that appears. This will provide you with a html code to copy.
  7. With the html copied your next step depends very heavily on what web builder program you are using but it follows the exact same logic as your basic google maps.

Wix and Weebly both offer a drop and drag field for embedding html/code which is a matter of dragging and placing the box where you want before pasting the html you just copied.

WordPress alternatively requires a few more steps and if you don’t have any HTML coding skill you may wish to send the html code onto your web designer to finish the job off. If not the steps are:

      1. Access your site’s WordPress backend at /admin.
      2. Identify the page or blog post that you would like to embed your map into and go to edit the page.
      3. Go to the ‘Text’ tab for your content section, find where in the html code of your existing content on the page you want the map and paste the html.

A Map Integrated Directly with your System

 

 

If you need a map that provide live updates, such as the status of your meters or which region your team is serving today there is a product called Accede Maps.

This tool allows you to tie your database into it so that pins and drawings can pull information from your other systems. This means that when a change occurs in your main system it can automatically push through to your map or if you want changes made on the map can push through to your other systems.

Steps

  1. Sign up for Accede Maps here. The product is free for displays under 20 pins. Over that there is a monthly charged based on how many users need to be able to enter/edit information within it.
  2. Once signed up you will need to decide what type of information you want the product to show. There are some base templates available or you can make one from scratch. Note the product offers integration with a few accounting products as well as other systems through Zapier but if you have a custom system you want plugged in Accede, the company that developed it, offers services to get them setup for a fee.
  3. Once your map has been setup you will need to get something called a Google API Key which can be done here, just click ‘get started’ and follow the prompts and when asked which features you want simply tick maps.

This key allow for many of googles more advance systems to be directly integrated into your website. If you’re a large organization that gets over 25,000 hits on your website a month there a cost to this otherwise its completely free.

  1. With your key sourced, return to Accede Maps and go into ‘Map Settings’ –> ‘API and Embedding’.
  2. Select the button that says ‘Create New API Key’, this will load you into a page which shows a copy of your main Accede Map but that can be edited and filtered according to what you want soon on your embedded.
  3. Once your embedded map has been designed copy the HTML code at the bottom of the screen and paste it into a word document.
  4. From here slightly modify the html by replacing the section “your google API Key” with your actual google key and copying the new html.
  5. With the html copied your next step depends very heavily on what web builder program you are using but it follows the exact same logic as your basic google maps.

Wix and Weebly both offer a drop and drag field for embedding html/code which is a matter of dragging and placing the box where you want before pasting the html you just copied.

WordPress alternatively requires a few more steps and if you don’t have any HTML coding skill you may wish to send the html code onto your web designer to finish the job off. If not the steps are:

      1. Access your site’s WordPress backend at /admin.
      2. Identify the page or blog post that you would like to embed your map into and go to edit the page.
      3. Go to the ‘Text’ tab for your content section, find where in the html code of your existing content on the page you want the map and paste the html.