How to Add a List of Saved Google Maps Places to a Website?

I was recently working on a new website where I needed to add a map of places specifically selected by my client. He had already saved all places and addresses to his Google Maps profile, but to my surprise, it turned out that it’s not easy to embed his Google Maps lists on a webpage. After doing some research, I realized that there’s a lot of confusion and misunderstanding on how to do it, so I decided to describe the process I used in this article. Below, you’ll find my step-by-step guide on how to embed a list of saved Google Maps places to a website.

Difference between Custom Maps and Google Maps Lists

Google Maps offers many features to its users: navigation, lists of saved places, the building of custom maps, etc. In this article, I’m speaking only about the custom Google Maps and the Google Maps lists of saved places, because these are the only two features you’ll need to use if you want to add a list of places to a webpage.

Let’s zoom in on these two:

Lists in Google Maps

Google Maps Lists are lists of places that you can save in your Google profile. By default, each Google Maps user has three different lists already built-in – “Favorites,” “Starred Places,” and “Want to Go”. However, you can also create your own custom lists and name them the way you want.

Based on your choice, your Google Maps lists can be public or private, and you can share them with other people via a link. The main purpose of the lists is to allow users to save places in their profiles and to share lists of places with other people. Unfortunately, it is not possible to simply embed or publish a list of places on your website. For this purpose, Google has created custom maps.

Custom Maps in Google Maps a.k.a My Maps

Google Custom Maps, also called Google My Maps, is another very popular feature that allows users to create custom maps for themselves or others. Custom Maps allows you to add your own landmarks and pinpoint on the map, add routes, directions, and locations. On a custom map, you can also draw your own shapes, add details and information about places, allow other users to see them, and most importantly, you can publish your custom map to the whole world. So in indifference to the list of saved places, the custom maps can be embedded to a website.

How to Add a Custom List of Google Maps Places to Your Website?

And this is where most people have a problem: if you’ve already saved all locations to your Custom lists of places, you need to find a quick way to transfer them to a custom map. Unfortunately, Google Maps doesn’t have this functionality, so when you want to show a list of places on a website, you need to build a custom map with all these places from scratch.

Below, I’ve shared the faster and the easiest way I found to do that.

1. Go to your Google Maps Account

Of course, the first step should be to go to your personal Google Maps profile, where you’ll find your saved places. To do that, just sign in to your Google Account and go to https://www.google.com/maps/

2. From the Menu (Top Left Corner) Select Your Places

Go to the main menu (in the top left corner) and select Your Places – it is here where all your saved places are stored.

3. In Your Places, Select Saved Places

Here you can see all the lists of places you have saved in your personal Google Maps profile. By default, all Google Maps users have three lists:

• Want to
• Favorites
• Starred Places

In addition to these three, you can create your own custom lists. Any custom lists that you’ve created you your own will also be visible here. In my case, I have created an additional list called “Travelled to”. On my website, I wanted to display only the places from this “Travelled to” list.

If your custom list is made Public (like in my case) you can share it with other Google Maps users, but you can not simply embed and display it on a website. In order to display any saved locations, you need to turn them into a custom map. To transfer all these places to a custom map, you first need to export them.

4. Save All the Places You Want to Show on Your Website to the Starred Places List

Unfortunately, as of today, Google Maps doesn’t allow you to export places from your custom lists. You can only export your “Starred places” list.

Because I already have saved all places to my “Traveled to” list, I only needed to add each one of them to the “Starred list’ as well. So basically I duplicated my “Traveled to” list in my “Starred places” list.

I did it quite easily by selecting each place from the list, click on Save → Save in your List → Starred Places → Back to list

In the end, I had my places copied to both lists and I made sure that the total count of places in each list matches. You can do a quick copy and paste it to Excel to do the count and compare whether you haven’t missed a location.

Once you’ve transferred all the locations to “Starred Places”, you need to import them to the Custom Google Map you will show on your website.

5. Go to Google Takeout and Export a Copy of your Google Maps data

Once you’ve starred all the places, go to https://takeout.google.com/.

This Google tool allows you to download a copy of your Google account data. It is very useful when you want to download your account data as a backup or when you need to use it on other websites that are not owned by Google. You’ll see that you can select the type of data you want to include in your backup. In our case, we only need to export data from Google Maps. Select only Maps (your places), as shown in the example below:

If you click on “Multiple formats”, you’ll see that they specifically say that this will export only your starred places and Place Reviews in a JSON format.

Scroll down to the list and click on “Next Step” to proceed.

6. Save Data Export on Your Computer

On the next screen, they will ask you if this is a one-time export and to choose the file format. Choose Export Once and export as a zip file.

The data export shouldn’t take more than a few seconds. On the final page, you’ll see a Download button to save the exported data on your computer. This will download a .zip file that contains 2 JSON files:

• Reviews.json – contains the reviews about places and businesses that you’ve written on Google Maps
• Saved Places.json – this is the list of your starred places that we just made.

The file “Saved Places.json” contains the list of “Starred places” we want to show on the website. The next step is to import these places to a custom Google map that we will show on our website.

7. Create a New Map in Google Maps

Create an empty map in your Google Account (Google Maps). This is the map that we will embed to the website.

One way to do that is by going to Your Places → Maps → Create Map. Another way is to go directly to Google My Maps → Create a new Map. Name your map and leave it empty for now.

Name your map and leave it empty for now.

8. Convert the JSON File to a KML File

Till this step, you’ve created a map to embed, but it is still empty. Now, you need to import the list of places you downloaded from your personal account (Step 5) to this new map. Unfortunately, the Saved Places.json file that contains the data is not in the correct format and cannot be used or imported as it is. We need to convert it to a KML file first.

Go to Mygeodata Could → Upload your JSON File and Convert

Fortunately, there are many free online converters that you can use. I converted my file using Mygeodata Could. If you follow the link below, you will direclty land to the page where you can select the JSON file to import:

Upload the JSON file you want to convert. In my new map, I didn’t want to import the reviews, so I only selected the Saved_Places.json file, as swhon on the screenshot below. However, if needed, you can select multiple JSON files at a time and turn them all into one KML file.

After you upload the JSON file, you should see the Conversion screen (as shown below) and if you’ve followed all the steps until now, you don’t need to do modyfy anything in Input and Output data. However, make sure that you have “KML” as the output format of your file, and if that’s not the case, just select it from the dropdown list.

Obviously, you can use another tool to do the file conversion, but I really liked Mygeodata Could because it allows you to preview the places from the JSON file, before converting them to KML and importing them to the new map. If you also want to preview your places before exporting, just select “Show in a map” after uploading your JSON file.

In the screenshot below, you will see the “preview” of my Saved Places on their map. I am able to double-check if all the places are there and if they are correctly displayed.

If everything looks fine, you should go back to the conversion screen (previous screenshot) and click on the green button “Convert now”.

After the file conversion is completed, you should see the Conversion Results screen and a big “Download” button. Make sure that you see “Output format: KML” and click on “Download”.

You’ll get a ZIP file (called mygeodata.zip) that contains the ready KML file. You should unzip mygeodata.zip, as we only need the file called “Saved_Places.kml”.

After that, you can continue to the next step.

9. Import the KLM File as a New Layer to your Custom Google Map

The KLM file that we now have (“Saved_Places.kml”) represents a layer of data that we need to add to the Custom Google Map we created in Step 7. The next step is to import this data. The import process is quite straightforward. 

9.1. Go back to your Google Maps account or directly to Google My Maps and select the Custom map you want to embed on your website.

9.2. Click on Import Layer > select your KLM file (“Saved_Places.kml”) > Import. You can import multiple KML files into one map, and each KML data file is a new layer.

You’re all set. Here’s how my map looked after I completed the import:

 

10. Assign Titles to all Imported Places 

You will notice that the main issue now is that the map shows all the places as “untitled”. This is because by default the KLM import used the value for the field “name” to display the title/name of each saved place. But it seems that in my .kml file the field “name” is empty everywhere. As the comments below this article show, other people had the exact same problem. I assume that’s because instead of “name”, Google used the field “Title” when saving places in the Starred list (in Step 4). Fortunately, we can easily fix that by selecting another information field to show for each place, as explained below: 

10.1. Select any of the places on your new map and click the “Edit” icon. This will open a small window containing all saved data for each individual location. Make sure that you see a value under the field “title”, as in my example below: 

10.2. In the dropdown menu select “Title” instead of “name” than Save. 

After you’ve clicked on Save, the modification should affect all places on the map. 

11. Make your Google Map Public

Once you are done importing the data to your Custom map, you need to make it public so that you can use it on your website. You can do this by clicking on the “Share” button (next to “Add Layer”) in the edit panel, as shown below:

You need to enable both “Enable link sharing” and “Public”, as shown below.

The sharing link you see here can be used to share the map between people, but if you want to show it on a webpage, you need to place this link in an iframe. Go to the next step to see how.

12. Embed your Custom Google Map to your Website

Finally, the last and easiest step is to embed your freshly made custom map to the website page where you want it to appear. This is very easy and if you use WordPress you won’t even need to install new plugins and code.

12.1. Go back to the edit panel of your map and select “Embed on my site”, as shown below:

12.2. This will generate a <iframe> code that contains a custom map link. Copy this code and paste it on your webpage, exactly where you want your map to appear.

 

The code that Google provides you with is in an <iframe> and it should be implemented in an HTML format. Depending on the CMS and the page editor your website is built on, you may need to modify the page format when you copy-paste the map code.

12.2.1. For example, under the current WordPress editor, you need to add the <iframe> code in a “Custom HTML” container, as shown below:

12.2.2. If you’re using the Classic WordPress Editor, you need to switch from the Text Editor tab to the HTML tab. Paste the <iframe> code directly in the “HTML tab” of your Classic WordPress Editor.

Conclusion

I hope that after following this guide you were able to quickly transfer and show your Google Maps places on your website. If that’s not the case and if you still have questions, please let me know in the comments below.