Set Position and Display Info in Google Map

In this example you will learn how to set position and display simple info in google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

var contents = '<div id="content">'+  
  '<div id="siteNotice">'+  
  '</div>'+  
  '<h1 id="firstHeading" class="firstHeading">techstrikers</h1>'+  
  '<div id="bodyContent">'+  
  '<p>techstrikers is developed to help you to begin HTML,CSS,XML,JavaScript,'+
  ' DOM,jQuery,ASP.NET,PHP,SQL Server, MySQL,colors,tutorial,programming,development,' +
  ' training,learning,reference,examples,source code,demos,tips,color table,' +
   ' cascading style sheets,asp.net, csharp, c#.net,ADO.NET, OOPS, Entity ' +
   ' Framework, KnockoutJS, MVC, LINQ, WEB API, Google Map API, Design Patterns etc.</p>'+  
  '<p><a href="https://www.techstrikers.com">'+  
  'https://www.techstrikers.com</a></p>'+  
  '</div>'+  
  '</div>';    
  
  var infowindow = new google.maps.InfoWindow({  
    content: contents  
  });  

Set Position and Display Info in Google Map Example

<!DOCTYPE html>  
<html>  
  <head>  <!-- www.techstrikers.com-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
    <meta charset="utf-8">  
    <title>Add Info window to Marker</title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;   
        width: 99%;   
      }  
    </style>  
    <script async defer  
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>  
        <script>   
  
function initMap() {  
  var lat_lng = {lat: 17.08672, lng: 78.42444};  
  var map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng  
  });  
  
  var contents = '<div id="content">'+  
  '<div id="siteNotice">'+  
  '</div>'+  
  '<h1 id="firstHeading" class="firstHeading">techstrikers</h1>'+  
  '<div id="bodyContent">'+  
  '<p>techstrikers is developed to help you to begin HTML,CSS,XML,JavaScript,'+
  ' DOM,jQuery,ASP.NET,PHP,SQL Server, MySQL,colors,tutorial,programming,development,' +
  ' training,learning,reference,examples,source code,demos,tips,color table,' +
   ' cascading style sheets,asp.net, csharp, c#.net,ADO.NET, OOPS, Entity ' +
   ' Framework, KnockoutJS, MVC, LINQ, WEB API, Google Map API, Design Patterns etc.</p>'+  
  '<p><a href="https://www.techstrikers.com">'+  
  'https://www.techstrikers.com</a></p>'+  
  '</div>'+  
  '</div>';    
  
  var infowindow = new google.maps.InfoWindow({  
    content: contents  
  });  
  
  var marker = new google.maps.Marker({  
    position: lat_lng,  
    map: map,  
    title: 'www.techstrikers.com'  
  });  
  marker.addListener('click', function() {  
    infowindow.open(map, marker);  
  });  
}  
    </script>  
  </head>  
  <body>  
    <div id="map"></div>  
  </body>  
</html>

See Live Example

Above example will produce following output