How to add google map on your website with marker

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

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

1. Get your api key

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

2. Create an HTML page and load the Google Map Javascript API into your web page.

<!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 callback parameter calls the 'initialize_map' function. The Javascript function initialize_map() adds the map within the div element.

Add Marker on the map with location name

To add a marker on the map, we will create an object literal and set 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>