Home » Web Design and Development » HTML » Adding a Google Map to display your address / location with a Marker to your website contact us page

Adding a Google Map to display your address / location with a Marker to your website contact us page

If you want to add google map on your website, so that you can show your exact address on contact page using map, use below code,

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 700px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 12.955746, lng: 77.691885};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
    </script>
  </body>
</html>

In Above code, you will have to change “lat: 12.955746, lng: 77.691885” to your longitude and latitude and also modify “key=YOUR_KEY”

Refer https://developers.google.com/maps/documentation/javascript/adding-a-google-map for more information.

Google Map in PHP with Source Code ...
Google Map in PHP with Source Code 2021 | PHP Project with Source Code Free Download

Leave a Comment