구글 지도 API 예제

by noa_xyz

HTML

<!DOCTYPE html>
<html> 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>google map API TEST</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        body {
            overflow: hidden;
        }
        div#map {
            width: 100vw; height: 100vh;
        }
        div.wrap {
            width: 200px;
        }
        div.text-box {
            text-align: center;
        }
        h4 {
            margin: 10px auto 0;
        }
        div.img-box {
            max-height: 100px;
            overflow: hidden;
        }
        img {
            width: 150px;
            margin: -20px auto 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        
        
        /* 확대/축소 등 구글 지도의 기본 UI 감추기 */
        .gmnoprint, .gm-control-active.gm-fullscreen-control {
            display: none;
        }
        
    </style>
</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">
        function initMap() {

            //지도 스타일
            var map = new google.maps.Map(document.getElementById('map'), {
                
                //처음 중심 좌표
                center: {
                    lat: 37.587624,
                    lng: 126.976020
                },
                
                //처음 줌 값. 숫자가 작을수록 낮은 배율
                zoom: 13
            });

            //마커 정보
            var locations = [
                
                //경복궁 마커
                ['<div class="wrap"><div class="text-box"><h4>경복궁</h4><div class="img-box"><img src="https://image.shutterstock.com/image-vector/palace-icon-outline-vector-web-260nw-1046855677.jpg"></div><a target="_blank" href="https://www.royalpalace.go.kr/"><p>홈페이지 방문하기</p></a></div>', 37.577624, 126.976020],
                
                
               ...