By Fronz-Tec

Web Basics Part 4 by Fronz-Tec

This is a Tutorial Series by Fronz-Tec to optimize your coding skills

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Website Title(The name of the Tab)</title>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</head>
<body>

<h1>Google Maps Tutorial.</h1>
<div id="map" style="width:100%;height:500px"></div>

</body>
</html>

Javascript Code

This is the JavaScript File for the Map.

JavaScript Code

function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom: 10
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}

The finished Map

If you want to change the coordinates, put them inside new google.maps.LatLng(xx,yy).

Output

The Map.

Tags of this Lesson

This is a list of the new HTML tags of this lesson and the use of them:

The div is an object you can define with class(recommended for the style) and id(recommended for the function).

Web Basic Tutorial Part 4: Google Maps[By Fronz-Tec]