I am trying to build a simple lay-out of a google-map for location of ships. Also I am pretty new to HTML programming so sorry if this is a simple question. The layout consists of the following components:
1) A google-map obtained subscribing with the Google Cloud platform and activating the API (this I have done)
2) A table at the bottom with 4 columns (I don't have)
3) And a space on the right that will be used for displaying more in detail information about the boat that was clicked from the table (I don't have)
Currently I was only able to activate and obtain a google-map using the API provided by their platform.
What I have so far is below:
What I am trying to achieve is the following layout:
What I tried so far:
Started from the official documentation I was able to develop the following:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API&callback=initMap"
async defer></script>
</body>
</html>
What would be a good procedure to add the missing components I am looking for? Thanks for pointing in the right direction for solving this problem.