Summary
In this post I'll show a very simple use-case of the Maps API. I'll display a map with markers on a simple web page.
Code
Below is a simple javascript array of markers to be added to the map. This array is stored in a file named markers.js.'use strict';
'use esversion 6';
const sites = [
{ lat: 39.016683491757995, lng: -106.31219892539934, label: 'Site 1' },
{ lat: 39.01841939481699, lng: -106.31966973052391, label: 'Site 2' },
{ lat: 38.816564618651974, lng: -106.243267861874, label: 'Site 3' },
{ lat: 38.970910463727286, lng: -106.40428097049143, label: 'Site 4' }
];
Simple HTML + javascript code to display the map and markers below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#map {
height: 800px;
width: 100%;
}
</style>
<title>Fabulous Sites</title>
<script type="text/javascript" src="markers.js"></script>
</head>
<body>
<div id="map"></div>
<script>
function markMap() {
const center = {lat: 38.8, lng: -106.24};
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center
});
for (let i=0; i < sites.length; i++)
var marker = new google.maps.Marker({
position: {lat: sites[i].lat, lng: sites[i].lng},
label: sites[i].label,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=markMap">
</script>
</body>
</html>
Results
Copyright ©1993-2024 Joey E Whelan, All rights reserved.


