TypeError: window.initMap은 함수가 아닙니다.
이 튜토리얼을 따르고 있습니다.기본적으로 모든 코드를 복사합니다.
https://developers.google.com/maps/documentation/javascript/tutorial
initMap 함수가 함수가 아니라는 오류가 발생하였습니다.프로젝트에 angularjs를 사용하고 있는데, 문제가 있나요?
같은 코드를 플런커에 복사했는데 잘 작동하더라고요생각할 수 있는 문제는 무엇입니까?
실제로 구글 API 스크립트의 initMap에서 오류가 발생하고 있습니다.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
따라서 기본적으로 Google Map API가 로드되면 initMap 기능이 실행됩니다.initMap 함수가 없는 경우 initMap is not function 오류가 발생합니다.
따라서 기본적으로 다음 옵션 중 하나를 수행해야 합니다.
- initMap 함수를 작성하다
- 콜백 함수를 같은 목적으로 작성했지만 다른 이름으로 지정한 사용자 자신의 함수로 바꿉니다.
-
&callback=angular.noop함수각형을 )
이 문제에 대한 설명:
.....&callback=initMap" async defer></script>는 스크립트를 (DOM과 병행하여) 비동기화하고 로드 후 initMap 기능을 실행합니다.글로벌 스코프의 initMap()에 주의해 주세요.이미 비동기 로드가 완료된 시점이기 때문에 Google 스크립트 뒤에 initMap()을 선언할 수 없습니다.이 전에는 스크립트를 로드할 수 없지만, 구글의 기능이 필요하기 때문에 실행할 수 없습니다.이건 악순환이야.
3가지 솔루션:
첫 번째와 최악의 경우: 구글의 스크립트를 동기적으로 로드합니다.
async defer&callback=initMapsrc- 놓다를
<script뒤에 붙입니다.Google 스크립트 뒤에 붙입니다.
2'nd 및 best: 이것만 수행하세요 =)
- 를 떠나다
.....&callback=initMap" async defer></script> - 의 ★★★★★★★★★★★★★★★.
<scriptyour script ( 뒤에 태그 부착) 대본에 기입하다
function initMap() {} // now it IS a function and it is in global $(() => { initMap = function() { // your code like... var map = new google.maps.Map(document.getElementById('map'), {/*your code*/}); // and other stuff... } })이를 통해 구글의 스크립트를 비동기식으로 로드하고 그 직후에 실행할 수 있습니다.
3번째 이상하다: 작동될 것이다...가끔 =)
동일하지만 단순히 글로벌 범위 내에서 작성한다.
function initMap() { // your code }글로벌 스코프로 작성하면, 어느 코드의 로딩이 고속인지(동기화) 또는 구글의 코드(sync)에 관계없이 동작합니다.성공 빈도가 높다
저는 지난 몇 달 동안 이 매우 인기 있는 호로 며칠 동안 어려움을 겪고 있습니다. "initMap is not function."
이 두 가지 스레드가 도움이 되었습니다.
왜 지도는 가끔 열리고 때로는 열리지 않을까?접속 속도, 환경 등 몇 가지 요인에 따라 달라집니다.구글 맵 API가 시작된 후 초기화 기능이 실행되기도 하므로 맵이 표시되지 않고 브라우저 콘솔이 오류를 발생시킵니다.저는 비동기 속성만 제거하면 문제가 해결됩니다.delay 속성은 그대로입니다.
비동기 기능이 있는 경우:스크립트는 페이지의 나머지 부분과 비동기적으로 실행됩니다(페이지가 해석을 계속하는 동안 스크립트가 실행됩니다).비동기화가 존재하지 않고 지연이 존재하는 경우:스크립트는 페이지의 해석이 완료되면 실행됩니다.비동기 또는 지연이 존재하지 않는 경우:스크립트는 브라우저가 페이지 해석을 계속하기 전에 즉시 가져와 실행됩니다.Source - http://www.w3schools.com/tags/att_script_defer.asp
도움이 됐으면 좋겠다.건배.
「」의 삭제"=initMap: 작업 완료:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback"></script>
이 문제는 스크립트태그 내의 비동기 Atribut과 관련되어 있습니다.콜백 함수는 요구가 완료될 때까지 실제로 존재하지 않을 때 "initMap()"을 호출하려고 합니다.
이를 해결하기 위해 goole maps API 스크립트를 initMap 함수가 선언된 스크립트 아래에 배치했습니다.
도움이 되었으면 좋겠다
당연한 것처럼 보일 수 있지만, 만약을 위해:누군가가 $(문서) 안에 JS 코드를 입력한 경우.다음과 같이 준비:
$(document).ready(function() {
... Google Maps JS code ...
}
럼럼 then then then then then then를 사용하니까async deferGoogle Maps API 라이브러리를 로드하면 비동기적으로 로드되고 로드 완료 시 콜백 기능을 찾습니다.
따라서 $(문서) 밖에 코드를 넣기만 하면 됩니다.준비 완료 및:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
맨 아래에 있기 때문에, 페이지가 고속으로 로드됩니다. :- )
추가에 의해 해결됨
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&callback=initMap">
<!--
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
-->
</script>
에는, 「」라고 하는 되어 있습니다.function initMap()확실히 최선의 해결책은 아니지만 효과가 있습니다.
만약 이 변신을 function initMap()과 같은 var=initMap() 다음에 또 한 번.$(function () ...그것도 효과가 있을 거야
React를 사용하고 있는데, 스크립트에 다음과 같이 &callback=initMap이라고 기재되어 있습니다.
<script
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
이제 막 제거되었습니다.&callback=initMapwindow.initMap은 콘솔의 함수가 아닙니다.
콜백 메서드는 글로벌하게 액세스 할 수 없는 경우가 있습니다.제 경우 웹 팩을 통해 변환된 ES6 코드를 사용했기 때문에 콜백 방식이 더 이상 글로벌하지 않게 되었습니다.
콜백 메서드를 명시적으로 접속합니다.window콜백 메서드 선언 직후에 같은 방법으로 결과를 확인합니다.
window.initMap = initMap;
그것은 나에게 효과가 있었다.
" 태그 사이에 initMap 메서드를 만들거나 javascript 파일을 로드한 후 Google api를 호출합니다.
<script src="Scripts/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=abcde&libraries=places&callback=initMap" async defer></script>저에게 있어서 가장 큰 차이점은 함수의 선언이었습니다.
대신
function initMap() {
...
}
이 방법은 효과가 있었다
window.initMap = function () {
...
}
이것을 html 본문에 넣습니다(공식 angular.js 웹사이트에서 인용).
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
angular.js 파일은 plunker에 문제가 없기 때문에 지정한 에러가 발생한 것으로 생각합니다.
알고 보니 이 일은ng-Route스크립트 로딩 순서는 디렉티브를 작성하고 API 스크립트를 모든 작업 위에 올렸습니다.
저도 비슷한 오류가 있었어요.이 답변은 제가 무엇을 해야 할지 고민하는 데 도움이 되었습니다.
index.displaces를 표시합니다.
<!--The div element for the map -->
<div id="map"></div>
<!--The link to external javascript file that has initMap() function-->
<script src="main.js">
<!--Google api, this calls initMap() function-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY&callback=initMap">
</script>
main.js // 오류가 발생합니다.
// The initMap function has not been executed
const initMap = () => {
const mapDisplayElement = document.getElementById('map');
// The address is Uluru
const address = {lat: -25.344, lng: 131.036};
// The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
const marker = new google.maps.Marker({ position: address, map });
};
이 답변은 해결책을 찾는 데 도움이 되었습니다.회피하기 위해 즉시 호출된 함수(IIFE)를 사용했습니다.
이 에러는 initMap() 함수가 실행되지 않은 Google maps api를 호출했을 때와 같습니다.
main.js // 이것은 동작합니다.
const mapDisplayElement = document.getElementById('map');
// The address is Uluru
// Run the initMap() function imidiately,
(initMap = () => {
const address = {lat: -25.344, lng: 131.036};
// The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
const marker = new google.maps.Marker({ position: address, map });
})();
실제로 효과가 있었던 것은, 다음과 같습니다.
- HTML 파일에서는, 이 파일을 삭제했습니다.
async로부터의 어트리뷰트<script>태그를 붙입니다. - JavaScript 파일에서, 나는 함수가 외부인 것을 다시 확인했다.
$(document).ready기능.
initMap 함수가 $(문서)에 있는 경우일 수 있습니다.ready function 입니다.이 경우 동작하지 않습니다.다른 기능 이외에는 동작하지 않을 수 없습니다.
@DB와 함께.Null의 답변, 나는 사용했다.Function.prototype대신 #3에서 no-op(no-op) 기능으로 사용됩니다.angular.noop(프로젝트에는 각도가 없습니다).
그래서 이게...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=Function.prototype" type="text/javascript"></script>
저 같은 경우, 이전에 포맷 문제가 있었기 때문에, 에러는 다른 이유로 인해 발생한 것입니다.서버는 지역 설정이 다르기 때문에 마침표가 아닌 쉼표로 lat/lon 값을 렌더링했습니다.
스크립트 태그에서 "initMap"의 콜백을 삭제하고 그 콜백을 자바스크립트 파일에 저장했습니다.
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY&callback=initMap"></script>
로 변경되었다.
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY"></script>
첫 번째 JS 태그는 제 거예요
<script async type=module src="js/app.js"></script> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY"></script>
JS 파일 내에서 다음 내용을 app.js 파일에 추가하여 initMap 함수를 호출했습니다.
initMap();
이는 구글에서 'initMap 함수는 함수가 아니다'라고 검색했을 때 가장 높은 결과이기 때문에 이미 많은 답변이 있지만, 저 같은 신입사원들에게는 어떤 일이 일어나고 있는지 매우 명확하게 설명하겠습니다.
Google 지도를 로드하려면 다음 세 가지가 필요합니다.
- A
<div id="map"></div> - Google Map javascript를 로드합니다.
- 맵을 시작하는 함수입니다.
div (간단)
그 div는 쉽다.구글맵 자바스크립트는 쉽지만 단점이 있다.
Google 지도 Javascript 로드
<script
src="https://maps.googleapis.com/maps/api/jskey=YOURKEY&callback=initMap"
defer
></script>
이 스크립트에는 두 가지 중요한 부분이 있습니다.defer와 callback=initMap
우선 지연에 대해 이야기해 봅시다.defer속성을 지정하면 HTML 문서의 전체 구문 분석 후 콜백이 실행됩니다.이렇게 하면 div가 로딩되어 Javascript에서 사용할 수 있습니다.단, Javascript 후에 Google Maps Javascript가 로드되는 것은 아니기 때문에 오류가 발생할 수 있습니다.
init 함수
Google 맵을 설정하는 코드를 실행하려면 함수를 호출해야 합니다.콜백은 구글 지도 코드가 로딩되면 사용자가 지도를 로딩하도록 지시하는 함수를 호출하기 때문에 쉽게 할 수 있습니다.
중요한 일이기 때문에 다시 한 번 말씀드리겠습니다.callback=initMap이 코드 내의 initMap 함수를 호출하고 있습니다.
Google 가 로드되지 "javascript"를 합니다.initMap아직되지 않았기 인지 알합니다.initMap은 initMap으로 정의됩니다.
이것은, 네트워크 시간이 다르기 때문에, 언뜻 보기에는 랜덤하게 발생할 가능성이 있습니다.코드 로딩이 먼저 이루어지면 동작할 수 있습니다.코드가 먼저 로드되지 않고 Google 지도 코드가 먼저 로드되어 오류가 발생할 수 있습니다.
솔루션
여러 가지 솔루션이 있지만 마음에 드는 것은 콜백을 설정하지 않고 모든 것이 로드된 후 직접 맵을 시작하는 것입니다.
이렇게 하면 Google Maps Javascript async를 로드할 수 있는데, 별도의 프로세스로 로딩되어 아무것도 기다리지 않기 때문에 더 빠릅니다.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY">
</script>
콜백이 설정되어 있지 않은 것에 주의해 주세요.구글맵 Javascript는 자동으로 초기화 기능을 호출하지 않습니다.모든 것이 준비되었다는 것을 알았을 때 호출해야 합니다.
윈도우 로딩 이벤트청취자를 사용하면 가능합니다.
window.addEventListener("load", docReady);
function docReady() {
initMap();
}
창 로드 이벤트는 Javascript를 포함한 모든 항목이 로드된 후에 발생합니다.
물론 이미지를 포함한 모든 것을 로드해야 하기 때문에 페이지 속도가 느려질 수 있습니다.그러면 맵이 기동하고 초기화되지만 매번 동작합니다.
자세한 내용을 학습하면 올바른 순서로 로딩할 수 있는 다른 방법을 배울 수 있습니다.행운을 빕니다.
이 솔루션이 도움이 되었습니다.
this.initMap = () => {};
...
src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
제 경우 Wordpress 웹사이트에 Map을 로드해야 했는데 문제는 initMap() 전에 Google의 API 스크립트가 로드되고 있었다는 것입니다.그 때문에, 저는 문제를 지연시켜 해결했습니다.
<script>
function initMap() {
// Your Javascript Codes for the map
...
}
<?php
// Delay for 5 seconds
sleep(5);
?>
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY&callback=initMap"></script>
언급URL : https://stackoverflow.com/questions/32496382/typeerror-window-initmap-is-not-a-function
'programing' 카테고리의 다른 글
| Oracle에서 AUTO_INCREMENT를 사용하여 ID를 생성하는 방법 (0) | 2023.03.25 |
|---|---|
| Woocommerce 관리 주문 편집 페이지에서 프로그래밍 방식으로 주문 노트를 추가합니다. (0) | 2023.03.25 |
| Ajax phmyadmin 대체 방법? (0) | 2023.03.25 |
| 클래스에 대해 스타일링되지 않은 콘텐츠의 플래시를 방지하는 AngularJS 전략 (0) | 2023.03.25 |
| ORA-30926: 소스 테이블에서 안정적인 행 집합을 가져올 수 없습니다. (0) | 2023.03.25 |