HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to add Google Maps to your web page
Start with a simple web page.
Add a <div> element where you want the map to display, and set the size of the map:
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:400px;">My map will go here</div>
</body>
<html>
Add a JavaScript function to display the map:
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 mapCanvas variable is the map's HTML element.
The mapOptions variable defines the properties for the map.
The center property specifies where to center the map (using latitude and longitude coordinates).
The zoom property specifies the zoom level for the map (try to experiment with the zoom level).
The google.maps.Map object is created with mapCanvas and mapOptions as parameters.
The functionality of the map is provided by a JavaScript library located at Google:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Learn more about Google Maps in our Google Maps Tutorial.