how to add google maps in html

//saddr = blank input field for entering START address //daddr = hard-coded END address //Enter an address and press button and a popup window opens with directions. //Enter no address, and just a map of the END address opens. //in angular add ngNoForm attribute in form tag and method as GET <form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your location</label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" /> <input type="submit" value="Get directions" /> </form>

add google map to website with marker

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Markers</title>
    <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>

      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Posted by: Guest on April-22-2020

Source

<script> function myMap() { var mapProp= { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } </script> <script src="[Google API link goes here]"></script>

You will need to generate an API key or leave blank during development <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY"> </script> Get a key following this intructions: https://developers.google.com/maps/documentation/javascript/get-api-key Quick link to Google Cloud Platform Console: https://console.cloud.google.com/

Code answers related to "how to add google maps in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "how to add google maps in html"

Code answers related to "how to add google maps in html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us