Google Map with marker and info window using JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Map with marker and info window using JavaScript</title>
</head>
<style>
html, body, #map-canvas {
height: 600px;
margin: 0px;
padding: 0px;
margin-top:20px;
}
</style>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
function initialize() {
/****** Change latitude and longitude here ******/
var myLatlng = new google.maps.LatLng(14.831634, 120.281559);
/****** 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">Olongapo City</h1>'+
'<div id="bodyContent">'+ '<div style="float:left; width:20%;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/OlongapoCityjf9265_13.JPG/250px-OlongapoCityjf9265_13.JPG" width="120" height="80"/></div>' +
'<div style="float:right; width:80%;margin-top: -6px;"><p>Olongapo, officially the City of Olongapo (Ilocano: Ciudad ti Olongapo; Sambali: Syodad nin Olongapo; Filipino: Lungsod ng Olongapo) and often referred to as Olongapo City, is a highly urbanized city in the Philippines. Located in the province of Zambales but governed independently from the province, it has a population of 233,040 people according to the 2015 census.[4] Along with the town/municipality of Subic (and later, Castillejos as well as the municipalities of Dinalupihan, Hermosa and Morong in Bataan), it comprises Metro Olongapo, one of the twelve metropolitan areas in the Philippines.'+
'https://en.wikipedia.org/wiki/Olongapo</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: 'Olongapo City (Philippines)'
});
/****** 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>
<div class="row">
<div class="col-lg-12">
<div >
<div id="map-canvas"></div>
</div>
</div>
</div>
</body>
</html>
