HTML Google Maps
Google Maps allows you to display maps on your web page:
A Basic Web Page
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
Set the Map Size
Set the size of the map:
Example
<div id="map" style="width:400px;height:400px">
<div id="map" style="width:400px;height:400px">
Create a Function to Set The Map Properties
Example
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Add the Google Maps API
At last, demonstrate the guide on the page!
The functionality of the guide is given by a JavaScript library situated at Google. Add a content to allude to the Google Maps API with a callback to the myMap function:
Example
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
0 comments:
Post a Comment