구글 맵 기본

创建基础的谷歌地图

此例创建以英国伦敦为中心的谷歌地图：

인스턴스

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个谷歌地图</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

接下来 ，我们会一步步研究上面这个例子。

地图容器和尺寸

地图需要一个 HTML 元素来存放地图：

<div id="googleMap" style="width:100%;height:400px"></div>

同时还要设置地图的大小。

创建一个函数来设置地图属性

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp 변수는 맵의 속성을 정의합니다。

center 속성은 맵의 중심 위치를 정의합니다（위도와 경도 좌표를 사용합니다）。

zoom 속성은 맵의 확대级别를 정의합니다（지도를 확대해 보세요）。

이 줄을 보세요：

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

그것은 전달된 매개변수 (mapProp) id="googleMap"의 <div> 요소 내에 새 맵을 생성합니다。

여러 맵

다음 예제는 네 가지 다른 맵 타입의 맵을 정의합니다：

인스턴스

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

무료 구글 API 키

구글은 웹사이트가 무료로 Google API를 매일 수천 번 호출할 수 있도록 허용합니다。

다음 링크를 방문하여 API 키를 얻는 방법을 알아보세요：

https://developers.google.com/maps/documentation/javascript/get-api-key

구글 맵은 API를 로드할 때 key 파라미터에서 이 API 키를 찾으세요：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>