도드넷
JAVASCRIPT#50 - OPEN API란? 구글맵 API 사용법! 본문
Come feel my little world.
JAVASCRIPT#50 - OPEN API란?
1. 오픈에이피아이 OPEN API란 무엇인가?
- 인터넷을 통해 이용가능한 무료 공개 스크립트 덩어리
2. OPEN API를 사용해보자
- 1. 키값을 받는다.
- 2. <script scr="키값이 포함된 API주소"></script> 를 <head>에 추가한다.
- 3. 객체를 생성한다.
3. Google Map API 사용하기
- 1. 구글맵 JS 튜토리얼에 들어가서 키값을 받는다.
- 2. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=아이디값=initMap"></script>을 HTML <head>에 추가해준다.
- 3. 튜토리얼에 따라 필요한 옵션을 추가하고 빼서 구글맵 객체를 생성해준다.
구글맵 객체 생성하기 : new google.maps.Map(맵을넣을요소, 옵션);
var GM = document.getElementById("GM");
var options = {
center: {lat : a, lng: b}, // 위치설정.
zoom: 8, // 줌설정.
mapTypeId:google.maps.MapTypeId.SATELLITE // 맵 타입설정.
};
var googlemap = new google.maps.Map(GM, options);
* 참고로 document.getElement("아이디") 대신에 $("#아이디")쓰면 작동안함 -_- (왜.)
4. 자바스크립트로 MP3 재생하기
var mymusic = new Audio("FMLW.mp3");
mymusic.volume = 0.3;
mymusic.play();
구글맵 API 적용예제. 지구상 랜덤아무곳에 가보기 >_<
구글맵.zip(지구 대부분이 바다라 바다가 주로 나옴 -_-;)
'창고 > JS KING 포니 [중단]' 카테고리의 다른 글
| 자바스크립트 오류 $ is not defined 해결법 jQuery 오류! (1) | 2016.06.23 |
|---|---|
| JAVASCRIPT#51 - jQuery UI tab 만들기 (0) | 2016.06.23 |
| JAVASCRIPT#49 - jQuery UI 4부 Effect (0) | 2016.06.21 |
| JAVASCRIPT#48 - jQuery UI 3부 Accordion 탭과 메뉴 (0) | 2016.06.20 |
| JAVASCRIPT#47 - jQuery UI 2부 draggable과 selectable (0) | 2016.06.19 |