Ever wanted to create a custom map to display on your website? Need to show multiple business locations in the single map? Well, there’s a simple solution you may not know about:
Google has a convenient Guided User Interface (GUI) for creating your own custom maps and embedding them into your website using an iFrame. You need to be logged in to you Google account, and the custom map will stay associated to your Google account when done unless you transfer ownership later.
Access the GUI here: https://www.google.co.nz/maps/
Visit Google Maps and click on the menu item in the top left menu bar to access the drop menu. Select “My Maps” to begin creating your own map. A new menu will appear with any of your custom maps shown in list form. If you haven’t yet created one, you can begin creating one here by selecting “create map” at the bottom of the menu panel (near the bottom of your screen).
In the next page a search bar will appear and you can enter the name and / or address of your first location. If the correct name does not appear at a specific location, don’t worry, you can edit it later. What matters is that you can select the right address.
Once you have located your first pin on the map, click on “add to map” and your new location will move to the content box on the left hand side of the screen. In this box, set the title and description and click save.
You can continue adding locations to your custom map.
Once you have all of your locations added you can also edit the titles, add a custom description and add an image to each location. You also have the option of changing the colour of the pin, or swapping the standard pin design for a custom icon.
In the Base map design button at the bottom of the left-hand content box you can also change the skin of the map by selecting from 9 preset designs.
If you want, you can also add shapes, measurements and navigation functions to the map by adding a layer (left hand box) and using the icon menu under the search box.
Once you have created your map you can save the map. It automatically saves during creation in your Google Drive “My Drive” folder in your Google account. From Google Drive you will need to share the map publicly if you want all users to be able to see this map, otherwise you won’t be able to select the Embed function in the 3-dot menu next to the Share feature in the left hand content box. The Embed allows you to grab an iFrame in the same that you would if you were embedding a standard Google map into your website. Copy and paste the embed code into a pre-allocated space in your website. You can re-size the iFrame by changing the width and height parameters in the iFrame, and by ensuring your allocated div in the website has a matching size. Pasting into smaller divs makes the embedded map smaller in responsive mode (automatically resizes and re-centres).
You can still add more locations, layers and skins any time using the Google My Maps interface and all changes you make will be updated automatically when you save the map, or when auto-save saves the map on the Google Drive location.
If you wish to transfer ownership of the map to a different Google account, follow the Google Drive change of ownership process like you would with any standard files. The new user must have full admin rights to the file before you can transfer it.
