Javascript Google Maps API Example to Extract Latitude & Longitude and Display in Info Window on Click Full Project For Beginners

 

 

 

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API</title>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
      #map {
        height: 100%;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div>
      <!-- <button id="bringToCenter">Bring to Center</button> -->
    </div>
    <script>
      let map, marker, infoWindow, infoWindowLatLang;
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: 51.513329,
            lng: -0.08895
          },
          zoom: 14,
          mapTypeId: "roadmap",
          scaleControl: true,
          fullscreenControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
          }
        });

        marker = new google.maps.Marker({
          position: {
            lat: 51.506821,
            lng: -0.0879
          },
          map: map,
          title: "City of London!"
        });

        infoWindow = new google.maps.InfoWindow({
          content: "<h2>London Bridge</h2>"
        });

        marker.addListener("click", function() {
          infoWindow.open(map, marker);
        });

        map.addListener("click", function(mapsMouseEvent) {
          if (infoWindowLatLang) infoWindowLatLang.close();

          infoWindowLatLang = new google.maps.InfoWindow({
            position: mapsMouseEvent.latLng
          });
          infoWindowLatLang.setContent(mapsMouseEvent.latLng.toString());
          infoWindowLatLang.open(map);
        });

        const markerControlDiv = document.createElement("div");
        const markerControl = new MarkerControl(markerControlDiv, map);

        markerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
          markerControlDiv
        );
      }

      const markerButton = document.querySelector("#bringToCenter");

      markerButton.addEventListener("click", function(e) {
        e.preventDefault();
        map.setCenter({
          lat: 51.513329,
          lng: -0.08895
        });
      });

      function MarkerControl(controlDiv, map) {
        const controlUI = document.createElement("div");
        controlUI.style.backgroundColor = "#fff";
        controlUI.style.border = "2px solid #fff";
        controlUI.style.borderRadius = "3px";
        controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
        controlUI.style.cursor = "pointer";
        controlUI.style.margin = "10px";
        controlDiv.appendChild(controlUI);

        const controlText = document.createElement("img");
        controlText.style.padding = "5px";
        controlText.title = "Click to add a Marker";
        controlText.src =
          "https://maps.google.com/mapfiles/ms/icons/red-pushpin.png";
        controlUI.appendChild(controlText);

        // Setup the click event listeners: simply set the map to Chicago.
        controlUI.addEventListener("click", function(e) {
          new google.maps.Marker({
            position: map.getCenter(),
            map: map
          });
        });
      }
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=##apikey##&callback=initMap&signed_in=true"
      async
      defer
    ></script>
  </body>
</html>

Leave a Reply