Google Maps Hello World

Examples /
Google Cloud Examples /
Google Maps Hello World


This project uses the Google Maps API to add a map to the page.

View the code for this project here.

Download the code as a .zip from DownGit here.

google map


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

<!DOCTYPE html>
  <title>Hello Google Maps</title>
  <script src=""></script>
    function createMap(){
      const map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.422, lng: -122.084},
        zoom: 16
    #map {
      width: 500px;
      height: 500px;
      border: thin solid black;
<body onload="createMap();">
  <h1>Hello Google Maps</h1>
  <div id="map"></div>
  <p>This page shows a Google Map!</p>

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:

Latest posts