JS - Google map API

Step one

html added:

<style>
	#hplus-map {
		width: 100%;
		height: 400px;
	}
</style>

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

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

JS

var gMapAPIKey = 'YOUR_API_KEY_HERE';

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('hplus-map'), {
		center: {lat: -34.397, lng: 150.644},
		zoom: 8
	});
}

 

Step 2: 

Look up stuff in google map javascript API reference => get options about instantiating map

map.getZoom()

Search in samples for creating Markers on maps and the info window for clicking on the marker

var map;
function initMap() {
	var storeLocation = {lat: 34.1031131, lng: -118.326343};

	map = new google.maps.Map(document.getElementById('hplus-map'), {
		'center' : storeLocation,
		'zoom' : 12,
		'mapTypeId' : google.maps.MapTypeId.ROADMAP,
		'draggable' : false,
		'scrollwheel' : false
	});
	
	var popupContent = 'H+ Sport<br>';
	    popupContent += '1750 Vine St<br>';
	    popupContent += 'Los Angeles, CA';
	
	var infowindow = new google.maps.InfoWindow({
		content: popupContent
	});
	
	var marker = new google.maps.Marker({
		'position': storeLocation,
		'map': map,
		'title': 'hplus sport in Los Angeles (actually Capitol Records in real life)'
	});
	
	marker.addListener('click', function() {
		infowindow.open(map, marker);
	});
}