How To Add Google Map With Info Window

How To Add Google Map With Info Window

How To Add Google Map With Info Window

0 Sales

Free

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

 

The Google Maps JavaScript API is an easy way to add a map to a web page with a marker and details window. In this tutorial, we'll show you how to use JavaScript to embed Google map, mark a location with an arrow, and view information in an info window.

 

The example code will point the location of Googleplex to a map marker on the Google map. In addition, the image and related information from Googleplex will be displayed in the marker info window.

 

Next, you need the actual location's latitude and longitude. Use Google map to follow the steps below to get latitude and longitude from the address.

 

  • 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.


 




 

The Googleplex website, for example, is Googleplex, 1600 Amphitheater Pkwy, Mountain View, CA 94043, USA. This location's latitude and longitude are 37.422060 and -122.084025.

 

Get API Key from Google Developer Console

To use the Google Maps JavaScript API, you need to create an API key. Create a free API key on the Google Developer Console before you start.

JavaScript Code

Include the Google Maps JavaScript API in the first place and provide key parameter for your API key.

 

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




The following code initializes a marker and data window for a Google map.

 

  • Create a function called initMap() for JavaScript.

  • Specify google.maps.LatLng() latitude and longitude.

  • Initialize google.maps.Map() and pass the variable mapOptions and assign it to the variable of the map.

  • Specify the contents of the info window in the contentString.

  • Google.maps. InfoWindow() is initialized and the contentString variable is passed.

  • Define some choices for markers and add them to the factor for markers.

  • Show the event click info window and the 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 (CodexWorld)'

});


/****** 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;

}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0