广西快乐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分开奖记录 股票行情查询 西游争霸2大圣归来吐分 茶坊店赚钱吗 体球网足球即时比分手机版 11选5怎么赚钱中4个 斗三公游戏下载 赌城登录 新强时时彩三星综合走势图 奥克兰大家乐娱乐有限公司 七星彩前四位电脑算法