If you want to display a map on your website that has more than one location plotted on it, you will need to create this on the Google Maps website and then embed it on to your site.
Firstly you will need to generate your map with the multiple locations plotted. To do this, please follow these steps:
- Go to https://www.google.co.nz/maps
- Make sure you're signed in - you can do so by clicking the Login button in the top-right corner.
- In the top left corner, next to the search box, click the menu icon to expand the menu.
- Click "Your Places", "Maps" and then click "Create Map" to edit your map.
5. A new window will pop up. Click "Untitled Map" and give your map a title and description, then click "Save"
6. You can now pinpoint locations manually by clicking the marker icon and placing it directly onto the map, or search for locations using the search box at the top of the screen.
7. If you're adding locations manually, you can name the location and save to add it to the map. If you're searching and adding specific locations, a green marker will appear on the map and you can click the 'Add to map' link.
8. Repeat steps 6 and 7 for each location you wish to plot.
An example of plotting your locations on the Google map.
You can also change the colour of each point, the icon that appears and the style of the base map under "individual styles".
Once you have added your points you can go in and edit them by clicking on the edit button underneath. You can also change the style or even add an image or video to your point.
Once you have finished save your map again and refresh the page. Then, to get the code to embed your map on to your website, please follow these steps:
- Make sure you map is public. You can do this by clicking 'Share' beneath the map name.
- Under 'Who has access' click 'Change' and make turn it 'On - Public on the web' and save.
- Next, click the menu icon and click on the link 'Embed on my site'.
4. The code will then pop up in a new window
5. To use this, you will need to paste the code into a code block on your chosen page.
6. Republish your website.
You can read how to add code blocks on Rocketspark websites here.
You will now have a map with more than one location on your website. Please note that the embed code currently provided by Google is not currently fully responsive. This means a small edit of the code is required. Change the width to "100%" i.e. width="100%" height="480" The height can remain as is.
An example site with the multiple location map on.
As an alternative to this solution, don't forget you can also just have two maps on your website with one location per map.
Visit www.kirstysinclair.co.nz home page to see how a real estate client uses this functionality to show the houses they have sold.
If you have any questions, we are happy to help!
We got this helpful information from Create.net
