구글 맵 예제

(1) 여러 Marker가 있는 Map

<div id="map" style="width:100%; height:450px;"></div>

<script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

zoom: 2,

center: new google.maps.LatLng(29.540815, 122.142758),

mapTypeId: 'roadmap'

});

var iconBase = 'http://www.google.com/mapfiles/ms/micons/';

var icons = {

info: {icon: iconBase + 'red-dot.png'}

};

var features = [

{

position: new google.maps.LatLng(22.280331, 114.156599), type: 'info' //HongKong, Hong Kong

}, {

position: new google.maps.LatLng(31.138541, 121.424410), type: 'info' //Shanghai, China

}, {

position: new google.maps.LatLng(21.030567, 105.833943), type: 'info' //Hanoi, Vietnam

}, {

position: new google.maps.LatLng(13.752362, 100.500820), type: 'info' //Bangkok, Tailand

}, {

position: new google.maps.LatLng(-6.147824, 106.824968), type: 'info' //Jakarta, Indonesia

}, {

position: new google.maps.LatLng(51.513683, -0.092065), type: 'info' //London, English

}, {

position: new google.maps.LatLng(34.0194, -118.411), type: 'info' //Los Angeles, USA

}

];

// Create markers.

features.forEach(function(feature) {

var marker = new google.maps.Marker({

position: feature.position,

icon: icons[feature.type].icon, map: map

});

});

}

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&callback=initMap&region=KR"></script>

(2) 단일 마커 생성 + 국가별 지도 생성

- 언어 옵션 파라미터 : &language=en
- 예 : <script async defer src=”https://maps.googleapis.com/maps/api/js?key=Your_API_Key&language=en&callback=initMap”></script>

en : English

en-Au : English (Australian)
en-GB : English (Great Britain)

da : Danish (덴마크어)
nl : Dutch (네덜란드어)
de : German (독일)
es : Spanish
it : Italian
fr : French
ru : Russian

ko : Korean
zh-CN : Chinese (Simlified : 간체)
zh-TW : Chinese (Traditional : 번체)
ja : Japanese
th : Thai
id : Indonesian
vi : Vietnamese

https://www.thewordcracker.com/miscellaneous/블로그에-구글맵을-삽입할-때-언어-지정하기/
언어 코드 목록 : https://developers.google.com/maps/faq#languagesupport

※ 2018년 7월 16일부로 구글지도 API가 유료화됨. 키 발급을 위해 해외결제 신용카드 정보를 반드시 입력해야 하며, API 발급 후 구글로부터 요금이 청구될 수 있습니다.

BOS - 구글지도 API 키 발급 받는 방법 : https://bos.kr:50300/kwa-manual_v-1601
Google Maps Platform : Web > Maps JavaScript API - Get API Key : https://developers.google.com/maps/documentation/javascript/get-api-key