Google Maps API

Publush Google Maps in my site using API

The HTML file

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Google Map</h1>
    <div id="googleMap" style="width:100%;height:400px;"></div>
    <script>
      function myMap() {
        var mapProp = {
          center: new google.maps.LatLng(51.508742, -0.120850),
          zoom: 15,
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnWvjCL8UdC7AwjKGz9bqy8-ac430jrk4&callback=myMap"></script>
  </body>
</html>

Find my Google Maps API key

  1. Enter console.cloud.google.com-google-maps-api 
  2. Press on "show key
  3.  
  4. Then you see the key
  6. Place the "key" in the HTML code here 
  7.  
  8. To create credentials to access your enabled APIs (to allow API in a specific places, noy every where...) press on "API key1" 
  9.  
  10. then, limit API access only to a to websites and limit for a spesific websites
  12. In my site https://api.bone.co.il/

Search