peabnuts123/index.html

## index.html
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h1>Hello</h1>

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


  <script src="./script.js"></script>
</body>
</html>

## script.js
// API Key - could be sourced from anywhere
var API_KEY = 'YOUR_API_KEY_GOES_HERE';

// Create script tag
var script = document.createElement('script');
// The API key needs to be part of the source
script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap"

// Add the script tag to the page (this makes the browser download the script)
document.body.appendChild(script);

// Marker objects
var places = [
  {
    lat: -41.274005,
    lng: 174.774609,
  },
  {
    lat: -41.2876171,
    lng: 174.7811156,
  }
];

// This function is called once Google Maps has finished loading
function initMap() {
  // Create map centered at wellington
  var wellington = { lat: -41.2867, lng: 174.7730 };
  var map = new google.maps.Map(document.getElementById('map'), {
    center: wellington,
    zoom: 12,
  });

  // Add 1 marker per object in the 'places' array
  for (var i = 0; i < places.length; i++) {
    var marker = new google.maps.Marker({position: places[i], map: map});
  }
}
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="./style.css">
	</head>
	<body>
	<h1>Hello</h1>

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


	<script src="./script.js"></script>
	</body>
	</html>
	// API Key - could be sourced from anywhere
	var API_KEY = 'YOUR_API_KEY_GOES_HERE';

	// Create script tag
	var script = document.createElement('script');
	// The API key needs to be part of the source
	script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap"

	// Add the script tag to the page (this makes the browser download the script)
	document.body.appendChild(script);

	// Marker objects
	var places = [
	{
	lat: -41.274005,
	lng: 174.774609,
	},
	{
	lat: -41.2876171,
	lng: 174.7811156,
	}
	];

	// This function is called once Google Maps has finished loading
	function initMap() {
	// Create map centered at wellington
	var wellington = { lat: -41.2867, lng: 174.7730 };
	var map = new google.maps.Map(document.getElementById('map'), {
	center: wellington,
	zoom: 12,
	});

	// Add 1 marker per object in the 'places' array
	for (var i = 0; i < places.length; i++) {
	var marker = new google.maps.Marker({position: places[i], map: map});
	}
	}