How to display Google Earth maps on website

When I hike, I track my routes with a GPS and import them into Google Earth. This works great on my personal computer, but it doesn’t allow me to easily embed the maps on a webpage. To allow others to view my maps, I import them into Google Maps and then embed these custom maps on my webpage.

Steps to embed Google Earth routes on webpage using Google Maps

  1. In Google Earth, right click on the route you want to save and select “save place as”save place as
  2. Save the file as a .kml
  3. Sign in to Google Maps and open the menu on the left side of the search bar by clicking the three line icon
    menu
  4. Within the menu, select “Your Places”, then the “Maps” tab.
    your places
    Maps tab
  5. This page will show all of your custom maps, click the “Create Map” link at the bottom of the page
  6. The map edit screen will open with one map layer created for you. Click “import” under the layer. This will let you select the .kml file that you created earlier.
    import
  7. If you want to add multiple routes to the same map (for instance a multi-day hike), add a new layer with the “Add layer” link, and import a separate .kml file.
  8. You can change the look of the map. These changes will be reflected on the embedded map if you change them in the future.
    • To change the color of the route, mouse over the name at the bottom of the layer section (“Enchantments Through hike” in the images below) and click the paint bucket icon.
      color
    • To add a label to the route, click on the “Individual styles” link and select the label you want to show.
      label
    • You can change the type of map (terrain, satellite, etc.) from the “Base Map” link under the layers section.
  9. In order to embed the map, you will have to make the map public through the “share” link.
    public
  10. Once the map is public, you can select the “Embed on my site” item from the menu.
    embed on my site
  11. Insert the provided code on your site, and you are done.
    copy code

 

Here is an example of an embedded map

Leave a Reply

Your email address will not be published. Required fields are marked *

five + eleven =