Keyless Google Maps API in github displays maps and markers on web pages without api key

An example blog to display maps and markers in a web page using the Google Maps API. Here is a simple example:
C:\pythoncode\blog\google-map-markers-gh-pages\google-map-markers-gh-pages\index.html
insert image description here

introduce:

In this blog, we will learn how to use the Google Maps API to display a map in a web page and add markers to the map. The Google Maps API provides rich functionality and flexibility, allowing us to integrate maps and geographic information in web pages.

step:

Create a new HTML file and save the following code as index.html:

 <!DOCTYPE html>
<html>
  <head>
    <title>Map with Markers and Info Windows</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
      
      
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
      
      
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var poly;
var map;

function initMap() {
      
      
  map = new google.maps.Map(document.getElementById('map'), {
      
      
    zoom: 7,
    center: {
      
      lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
      
      
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
      
      
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
      
      
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
    </script>
    <script src="https://cdn.jsdelivr.net/gh/somanchiu/[email protected]/mapsJavaScriptAPI.js"></script>
  </body>
</html>

Please include it in the page source code <script src="https://cdn.jsdelivr.net/gh/somanchiu/[email protected]/mapsJavaScriptAPI.js">. Make sure you don't need to enter the Maps JavaScript API to use the Google Maps service.

Open the file in a browser index.htmland you'll see a map displayed on the page with a marker displayed on the map.

Summarize:

In this blog, we learned how to use the Google Maps API to display maps on web pages and add markers. By using the Google Maps API and some simple JavaScript code, we can easily integrate maps and geographic information into our web pages.

reference

https://github.com/somanchiu/Keyless-Google-Maps-API/tree/master
http://www.noobyard.com/article/p-txwklxur-bm.html