<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px"></div>
<script>
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);
</script>
</body>
</html>
HOW IT WORKS:
1. first to use a google map you need to first import the google API from google site or you can download the offline version
here
or just use it like this on your webpage:
<script src="https://maps.googleapis.com/maps/api/js"></script>
2.create a div and give it os unique id can be anything but for this tutorial we are using "map"
or just use it like this on your webpage:
<script src="https://maps.googleapis.com/maps/api/js"></script>
2.create a div and give it os unique id can be anything but for this tutorial we are using "map"
<div id="map" style="width:400px;height:400px"></div>
add a bit of style to it(height and width can be of any pixel as you want)\
3.now to the javascript:
create two variable of any name but for this tutorial we are using mapCanvas and mapOption
3.now to the javascript:
create two variable of any name but for this tutorial we are using mapCanvas and mapOption
mapCanvas is the map's HTML element.mapOptions is the map's options.The center property gets the latitude and longitude (of London) by callinggoogle.maps.LatLng().The zoom property is set to 10. (try to experiment with the zoom)The google.maps.Map object is created with mapCanvas and mapOptions as parameters.
get the html element by id this is where our map will be displayed
var mapCanvas = document.getElementById("map");
set the map options which includes the latitude and the longitude and the zoom level
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}
declare another variable to implement both our mapOption and mapCanvas(for this tutorial we are using map)
var map = new google.maps.Map(mapCanvas, mapOptions);
center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}
declare another variable to implement both our mapOption and mapCanvas(for this tutorial we are using map)
var map = new google.maps.Map(mapCanvas, mapOptions);
0 comments:
Post a Comment