How to add google map on your website with marker

In this post, you will learn how to add a Google map to your website and display the address when you click on the Google marker.

It is a perfect way to embed a Google map on your website to show the contact address or to grow your business. Today, Google maps is the best way to show your different hub locations and proper directions to ensure good convenience for your customers. In this article, we have mentioned two examples. In the first script, you will learn to display the Google map on your website with a marker, and in the second script, you will learn to show the location name when you click the marker.

How to add google map on your website and display address on click marker

1. Get your api key

To embed a Google map on a webpage, we first need to generate a Google API. For this, first login to your Gmail account, go to 'Google API Console' and follow the instructions and get the API key.

2. Create an HTML page and insert the Google Maps JavaScript API into it.

<!DOCTYPE html>
<html>
  <head>
    Google map api with marker
  </head>
  <body>
    <div id="map_container" style="width: 50%; height: 350px;"> </div>
    <script>
      function initialize_map() {
        var mapDiv = document.getElementById('map_container');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 28.7041, lng: 77.1025},
			zoom: 10
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize_map">
    </script>
  </body>
</html>

In the above example, replace the API_KEY with your generated API key. This script calls the Google JavaScript map api, and a callback parameter calls the 'initialize_map' function. The map is added to the div element by the JavaScript function initialize_map().

Add Marker on the map with location name

To add a marker on the map, we will create an object literal and set the properties of the marker by using google.maps.Marker constructor.

<!DOCTYPE html>
<html>
  <head>
    Google map api with marker
  </head>
  <body>
    <div id="map_container" style="width: 50%; height: 350px;"> </div>
    <script>
      function initialize_map() {
        var mapDiv = document.getElementById('map_container');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 28.7041, lng: 77.1025},
			zoom: 10
        });
        var marker = new google.maps.Marker({
	     position: new google.maps.LatLng(28.6315, 77.2167),
	     map: map
	 });
	 var address = '<div><p><b>Organization  Address</b></p></div>';
	 var infowindow = new google.maps.InfoWindow({
             content: address
         });
         marker.addListener('click', function() {
          infowindow.open(map, marker);
         });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize_map">
    </script>
  </body>
</html>