그러냐

구글 지도 API 현재 위치 표시하기 본문

javascript

구글 지도 API 현재 위치 표시하기

관절분리 2020. 4. 23. 14:13
반응형

일단 구글 지도 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...()"> 이렇게 바꿔서 사용하였다

잘된다

끝

 

 

 

반응형
저작자표시

'javascript' 카테고리의 다른 글

array key value 이용한 selectbox option 설정하기  (0) 2020.10.29
[Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기  (0) 2020.07.16
에러 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.  (0) 2020.04.13
자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법  (0) 2019.11.19
[JavaScript] HTML5 API Geolocation - 현재 위치 정보 얻기  (0) 2019.10.22
'javascript' Related Articles more