nndeveloper
8/16/2018 - 5:30 PM

GOOGLE MAPS

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Map with Marker and Info Window by CodexWorld</title>
<style>
	html, body, #map-canvas {
		width: 100%;
		height: 40vh;
		margin: 0px;
		padding: 0px
	}
</style>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script> -->
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function initMap() {
	/****** Change latitude and longitude here ******/
	var myLatlng = new google.maps.LatLng(44.758455, 20.554365);

	/****** 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="http://via.placeholder.com/300" width="120" height="80"/></div>' +

		'<div style="float:right; width:80%;margin-top: -19px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa quo cumque ratione nam. Eaque sunt dignissimos dolores beatae, nobis officiis expedita, enim fugiat ipsum? Facilis, natus aut suscipit expedita.<br/>' +

	 

		'<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'
	});

	/****** 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', initMap);
</script>
</head>
<body>
		<div id="map-canvas"></div>
</body>
</html>