반응형
간단한 웹사이트를 만들고 있는데
지도 기능을 넣고 싶어서 찾아보았다.
복잡해보이지만 생각보다 간단한 것!
Adding a Google Map with a Marker to Your Website
<!DOCTYPE html>
<html>
<head>
<title>Add Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
<style>
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
</script>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_CODE&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>반응형
'Javascript' 카테고리의 다른 글
| javscript remove(); 체크박스 삭제 사용시 주의사항 (0) | 2021.09.29 |
|---|---|
| [Javascript] CDN이란? (Content Delivery Network) (0) | 2021.08.25 |
| [Javascript] 자바스크립트 프로처럼 쓰는 팁 / 엘리코딩 (0) | 2021.08.08 |
| [Javascript] onkeypress() / keyup, keypress, keydown (0) | 2021.07.29 |
| [Javascript] querySelectorById와 getElementBy 차이 (0) | 2021.07.23 |