Google Map with marker and info window using JavaScript


Google Map is very widely used in every web project. We always need to display Google map with location marker and display information on the marker. In this tutorial we will discuss how to point the location on Google map and display some information with popup window. We will use JavaScript to make the Google map with location marker and information window. This tutorial will make the whole process simple and easy. With our tutorial you would be able to integrate the google map in your project.

Please follow our step by step tutorial for understand the whole process easily. Also you can view the live demo from the “Demo” link at the top and download the script from the “Download” link at the top.

In this tutorial we will point the Googleplex on the Google map with map marker. Also we will display the Googleplex image and related information at info window on the marker. Googleplex address is Googleplex, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States.

Googleplex map with image and information window screenshot

 At first we need Googleplex location’s latitude and longitude. Follow the below steps to get the latitude and longitude from address.

  •  Go to the Google map website Google Maps
  •  Enter address and search in the Google map.
  •  Red marker would be displayed and it would be pointed to the Googleplex.
  •  Right click on the marker.
  •  Some options would be appear.
  •  Click on the “What’s here?” option.
  •  Address box with latitude and longitude would be appear under the search box at the top left corner.
  •  Get the address latitude and longitude from here.
  •  For example the Googleplex latitude is 37.422277 and longitude is -122.084058

 Include the Google map API JavaScript library.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

 At first create a JavaScript function initialize().

function initialize() {
}

 Now write some JavaScript code into the initialize() function. initialize() function codes are given below.

 Put the address latitude and longitude in google.maps.LatLng(), which is defined at var myLatlng.

var myLatlng = new google.maps.LatLng(latitude, longitude);

 Define some map options and assign into the mapOptions variable.

var mapOptions = {
    zoom: 14,
    center: myLatlng
};

 Initialize google.maps.Map() and pass the mapOptions variable and assign it into the map variable.

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 Store the info window content into the contentString variable.

var contentString = '<div id="content">'+
	'<div id="siteNotice">'+
	'</div>'+
	'<h1 id="firstHeading" class="firstHeading">Googleplex</h1>'+
	'<div id="bodyContent">'+ '<div style="float:left; width:20%;"><img src="image.jpg" width="120" height="80"/></div>' +
	'<div style="float:right; width:80%;margin-top: -19px;"><p>The <b>Googleplex</b> is the corporate headquarters complex of <b>Google, Inc.</b>, located at <b>Googleplex, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States</b>. <br/>' +
	'The original complex with 2 million square feet of office space is the company\'s second largest square footage '+
	'assemblage of Google buildings (The largest Google building is the 2.9 million square foot building in New York City '+
	'which Google bought in 2010) '+
	'<p>Attribution: Googleplex, <a href="http://en.wikipedia.org/wiki/Googleplex">'+
	'http://en.wikipedia.org/wiki/Googleplex</a> '+
	'.</p></div>'+
	'</div>'+
	'</div>';

 Initialize google.maps.InfoWindow() and pass the contentString variable. Also assign into the infowindow variable.

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

 Define some marker options and assign into the marker variable.

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Googleplex (CodexWorld)'
});

 If you want to display info window on click event, then write the following codes.

google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
});

 Also you can display the info window on map load.

infowindow.open(map,marker);

 initialize() function creation is completed. Now call the initialize() function on window load.

google.maps.event.addDomListener(window, 'load', initialize);

 Complete JavaScript Codes are given below.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
function initialize() {
	var myLatlng = new google.maps.LatLng(37.422277, -122.084058);
	
	/****** Map Options *******/
	var mapOptions = {
			zoom: 14,
			center: myLatlng
		};

	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	/****** Info Window Contents *******/
	var contentString = '<div id="content">'+
		  '<div id="siteNotice">'+
		  '</div>'+
		  '<h1 id="firstHeading" class="firstHeading">Googleplex</h1>'+
		  '<div id="bodyContent">'+ '<div style="float:left; width:20%;"><img src="image.jpg" width="120" height="80"/></div>' +
		  '<div style="float:right; width:80%;margin-top: -19px;"><p>The <b>Googleplex</b> is the corporate headquarters complex of <b>Google, Inc.</b>, located at <b>Googleplex, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States</b>. <br/>' +
		  'The original complex with 2 million square feet of office space is the company\'s second largest square footage '+
		  'assemblage of Google buildings (The largest Google building is the 2.9 million square foot building in New York City '+
		  'which Google bought in 2010) '+
		  '<p>Attribution: Googleplex, <a href="http://en.wikipedia.org/wiki/Googleplex">'+
		  'http://en.wikipedia.org/wiki/Googleplex</a> '+
		  '.</p></div>'+
		  '</div>'+
		  '</div>';

	var infowindow = new google.maps.InfoWindow({
			content: contentString
		});
	
	/****** Map Marker Options *******/
	var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			title: 'Googleplex (CodexWorld)'
		});

	/****** Info Window With Click *******/
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});

	/****** Info Window Without Click *******/
	infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

 Need some HTML for display the map.

<div id="map-canvas"></div>

4 Comments

  1. Aamir Khan Said...
  2. Chris Said...
    • CodexWorld Said...
  3. Geri Said...

Leave a reply

Connect With CodexWorld