Google Maps Tour

Google Maps Tour

September 20, 2020

example javascript google-cloud maps

This project uses the Google Maps JavaScript library to create a map that shows various landmarks around Google.

View the code for this project here.

Download the code as a .zip from DownGit here.

google tour map


index.html is an HTML file that contains JavaScript that creates a map using the Google Maps JavaScript library.

<!DOCTYPE html>
  <title>Google Tour</title>
  <script src=""></script>

    /** Creates a map that shows landmarks around Google. */
    function createMap(){

      const map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.422403, lng: -122.088073},
        zoom: 15

      addLandmark(map, 37.423829, -122.092154, 'Google West Campus', 'Google West Campus is home to YouTube and Maps.')
      addLandmark(map, 37.421903, -122.084674, 'Stan the T-Rex', 'This is Stan, the T-Rex statue.')
      addLandmark(map, 37.420919, -122.086619, 'Permanente Creek Trail', 'Permanente Creek Trail connects Google to a system of bike trails.');

    /** Adds a marker that shows an info window when clicked. */
    function addLandmark(map, lat, lng, title, description){

      const marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        map: map,
        title: title

      const infoWindow = new google.maps.InfoWindow({
        content: description
      marker.addListener('click', function() {, marker);
      width: 500px;
      height: 500px;
      border: thin solid black;
<body onload="createMap();">
  <h1>Google Tour</h1>
  <p>Here are a few of my favorite places at Google!</p>
  <div id="map"></div>

Change YOUR_API_KEY to your actual API key and then open the file in your browser. You should see this:

google tour map

Learn more in these tutorials:

Google Maps Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!