Google Map with Marker and Info Window using JavaScript

Demo

Google Map is the widely used web element to display the map in the web application. Google Map helps to mark a location on the map with marker and display details information in a popup window. An info window displays content in a popup window over the map and added to a specific location. Generally, the InfoWindow is attached to a marker (specific latitude/longitude) for display text/images content over the Google map.

Google Maps JavaScript API provides an easy way to add a map with marker and info window to a web page. In this tutorial, we will show you how to embed Google map, mark a location with marker and display content in an info window using JavaScript.

The example code will point the Googleplex location on the Google map with a map marker. Also, the Googleplex image and related information will be displayed in info window on the marker.

Get Latitude and Longitude from Address

At first, you need the latitude and longitude of the specific location. Follow the below steps to get the latitude and longitude from address using Google map.

  • Visit the Google map website.
  • Enter the desired location and search on the Google map.
  • The red marker would be displayed and it would be pointed to the Googleplex.
  • Right-click on the marker. Click on the What’s here? option.
  • A dialog box with details address, latitude, and longitude will appear at the bottom of the map. Collect the address latitude and longitude from here.
    embed-google-map-get-latitude-longitude-from-address-semicolonworld

For example, the Googleplex address is Googleplex, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA. The latitude and longitude of this location are 37.422060 and -122.084025.

Alternatively, you can also use the online free tool to get the latitude and longitude from address – Find Latitude Longitude From Address Online

Get API Key from Google Developer Console

You need to create an API key to use Google Maps JavaScript API. Before you get started, generate a free API key on Google Developer Console. See this step-by-step guide to get API key from Google API Console – How to Get Google Maps JavaScript API Key

JavaScript Code

At first, include the Google Maps JavaScript API and provide your API Key in key parameter.

<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script>

The following code initializes a Google map with marker and info window.

  • Create a JavaScript function called initMap().
  • Specify the latitude and longitude in google.maps.LatLng().
  • Define some map options and assign into the mapOptions variable.
  • Initialize google.maps.Map() and pass the mapOptions variable and assign it into the map variable.
  • Specify the info window content into the contentString.
  • Initialize google.maps.InfoWindow() and pass the contentString variable.
  • Define some marker options and assign into the marker variable.
  • Display info window on click event and map load.
function initMap() {
	/****** Change latitude and longitude here ******/
	var myLatlng = new google.maps.LatLng(37.422021, -122.084079);
	
	/****** 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 (semicolonworld)'
	});

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

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

Once the initMap() function creation is completed, call the initMap() function on window load.

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

HTML Code

Define an area in the web page to display the Google Map. This area selector (map-canvas) needs to be specified in Map JavaScript Object.

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

CSS Code

Add the following CSS to set the width and height of the Google map.

#map{
    width: 100%;
    height: 400px;
}

Related Articles

Comments 0