HTML Google Maps

Google지도를 사용하면 웹 페이지에지도를 표시 할 수 있습니다.

A Basic Web Page

웹 페이지에 Google지도를 추가하는 방법을 보여주기 위해 기본 HTML 페이지를 사용합니다.

Example

<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>

<html>

Set the Map Size

지도 크기 설정 :

Example

<div id="map" style="width:400px;height:400px">

Create a Function to Set The Map Properties

이 예는 영국의 런던 중심의 Google지도를 정의합니다.

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);

}

<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px;background:yellow"></div>

<script>

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);

}

</script>

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

</body>

</html>