| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 자동 생성
- 안드로이드
- xe
- PHP
- Android
- not working
- Mail Server
- dovecot
- C# IO
- php 취약점
- chart.js
- php 시큐어코딩
- 안드로이드 gcm
- html5
- WebView
- mysql
- roundcube
- 안드로이드 푸시
- 우분투
- C#
- javascript
- 설치
- soundpool
- 폼메일
- UML
- android 효과음
- FCM
- 안드로이드 푸쉬
- 자바스크립트
- curl
- Today
- Total
그러냐
구글 지도 API 현재 위치 표시하기 본문
일단 구글 지도 API를 사용하기 위해서는 API 키를 발급받아야한다
키를 받고 난 후 구글에서 제공하는 예제를 그대로 따라하면 되는데..
https://developers.google.com/maps/documentation/javascript/geolocation?hl=ko
Geolocation: Displaying User or Device Position on Maps
Overview This tutorial shows you how to display the geographic location of a user or device on a Google map, using your browser's HTML5 Geolocation feature along with the Maps JavaScript API. (Note that the geographic location of a user will only display i
developers.google.com
위 링크가 현재 위치표시해주는 예제이다
그대로 복사해서 붙여넣기 해보자
안된다
확인해보자
1. 발급받은 키를 넣어준다
2. https 인지 확인한다. http에서는 현재위치를 받아오지 못한다
테스트페이지에서는 이정도만 하면 잘 나온다 하지만 막상 디자인페이지에 입히려고 하면 또 안된다
3. 예제의 css가 안겹치는지 확인하고
4. <script async defer src="https://maps.googleapis.co........... 예제에서는 이런식으로 API를 참조하게 되는데 async와 defer,두가지키워드가사용되고있다
두 키워드가 무엇을 의미하는지는 알아서 검색해보길 바란다. 어째든 저 키워드때문에 저 API js의 로드가 끝나면 callback=init... 이렇게 되있어서 init 함수를 불러오게 되는데 그 시점이 본 페이지의 html이 모두 로드 되기 전에 불려지게 되면 당연히 에러가 난다
근데 어쩔땐 로드가 된 후 init 되기때문에 잘되고 어쩔땐 로드가 안된 상태에서 init 되기때문에 안된다. 그래서 검색하다보면 때때로 안되는 현상에 대해 질문글들을 보게 된다. 여러 원인이 있겠지만 일부는 이 문제이지 않나 싶다
그래서 async defer 두 키워드를 삭제하고 <body onload="init...()"> 이렇게 바꿔서 사용하였다
잘된다
끝
