Embed Google Maps with Marker and Info Window in HTML using JavaScript

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

Google Maps JavaScript API provides an easy way to add a map with a marker and info window to a web page. An InfoWindow is used to display content (text, images, and HTML) in a popup window on the marker of a given location above the map. In this tutorial, we will show you how to embed Google Maps, mark a location with a marker, and display content in an info window using JavaScript.

In this example code, we will point to a specific location on Google Maps with a marker.

• An info window with HTML content (text, image, etc) will be added to the marker.
• The info-window will appear on the marker click that displays information on a popup.

Get Latitude and Longitude from Address

The latitude and longitude are required to mark a specific location on Google Maps. So, you need to collect the latitude and longitude of the location which you want to add on Google map with a marker.

Follow the below steps to get latitude and longitude from the address using Google Maps.

• Visit the Google Maps website.
• Enter the desired location and search on the Google Maps.
• A red marker would be displayed and it would be pointed to a location on the map.
• Right-click on the marker or an area that you want to select.
• The latitude and longitude will appear at the top of the options list. Click on it to copy.
• A dialog box with details of address, latitude, and longitude will appear at the bottom of the map. Collect the address latitude and longitude from here.
  

For example, the Googleplex address is “1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States”. The latitude and longitude of this location are 37.422236 and -122.0841863.

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

Google Maps API Key

An API Key is required to access Google Maps JavaScript API on the web page. Before getting started create an API key on Google Cloud Console.

Follow the below steps to get an API key for Maps JavaScript API:

• Go to the Google Cloud Console.
• Create a new project or select an existing project.
• Click Continue to enable the API and any related services.
• On the Library page, the Maps JavaScript API service must be enabled.
• On the Credentials page, click CREATE CREDENTIALS ​» API key to get an API Key. You can also set the API key restrictions as per the webpage URL where this key will be used.
• Copy this API key to use in the HTML code required in the next step.

For a detailed guide, see this step-by-step guide to get an API key from Google API Console – How to Get Google Maps JavaScript API Key

Embed Google Map with Marker and Info Window in HTML

The following code sample shows you how to load the Maps JavaScript API library into a web page and display the map with marker and infowindow in HTML.

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

• The callback parameter executes the initMap function after the API is loaded.
• The defer attribute makes the callback to be executed after the HTML page has finished parsing.

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

JavaScript Code:
The following code initializes google.maps.Map() object to embed Google map with marker and info window.

• Create a callback function called initMap() using JavaScript.
• Specify the latitude and longitude of a specific location in the myLatLng variable.
• Initialize google.maps.Map() with element selector (mapCanvas) and pass options (zoom, center, etc.) and assign it to the map variable.
• Specify the info window content into the contentString.
• Initialize google.maps.InfoWindow() and pass the contentString variable.
• Define some marker options (position, map, title, etc.) and assign them to the marker variable.
• Open the info window on the marker click event or map load.
• Assign initMap callback function to window.initMap.

<script>
// Initialize and add the map
function initMap() {
    // Latitude and longitude of the selected location
    const myLatLng = { lat: 37.422021, lng: -122.084079 };

    // The map, centered at selected location
    const map = new google.maps.Map(document.getElementById("mapCanvas"), {
        zoom: 12,
        center: myLatLng
    });
	
    // Info window content
    var contentString = '<div id="content">'+
        '<h1 style="font-size:20px;">Googleplex (CodexWorld)</h1>'+
        '<div id="bodyContent">'+ 
            '<div style="float:left; width:20%;"><img src="info-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>';

    // Add info window
    const infowindow = new google.maps.InfoWindow({
        content: contentString
    });
	
    // The marker, positioned at selected location
    const marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Googleplex (CodexWorld)'
    });

    // Marker click event: open info window
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    // Open info window on load
    infowindow.open(map, marker);
}

window.initMap = initMap;
</script>

HTML Code:
Define an HTML element in the web page to display the Google Map. This area selector (mapCanvas) must be specified in Map JavaScript Object.

<div id="mapCanvas"></div>

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

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

Google Maps with Multiple Markers and Info Windows using JavaScript API V3