广西快乐10分开奖记录|广西快乐10分走势图表
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

How TO - Google Maps


Learn how to add a Google Map to a web page.


A Basic Web Page

All web page are written in HTML.

To demonstrate how to add a Google Map to a web page, we will use a simple 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>
Try it yourself »

Set the Map Size

Set the size of the map:

Example

<div id="map" style="width:400px;height:400px">
Try it yourself »

Add the Google API

The functionality of the map is provided by a JavaScript library located at Google.

The JavaScript library can be loaded in the <head> section of the HTML page.

Note Actually you can drop the <head> and </head> tags.

Example

<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
Try it yourself »

Create the Map Using JavaScript

Finally add the necessary JavaScript to the page:

Example

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);
Try it yourself »

Example Explained

mapCanvas is the map's HTML element.

mapOptions is the map's options.

The center property gets the latitude and longitude (of London) by calling google.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.

Go to our Google Maps API Tutorial. to learn more about Google Maps.


广西快乐10分开奖记录 vr彩票是官方的吗 竞彩比分投注规则 青海快3 雷速比分网即时比分 雪缘园比分直播 麻将抢红包 35选7 欢乐三人麻将下载 足球指数足球即时指数亚洲指数 电竞比分网1zplay微博