Google Maps zwraca błąd initMap is not a function


(northwest) #1

Witam serdecznie,
Mam taki kod:

<!DOCTYPE html>

<html lang="pl">

    <head>

        <meta charset="utf-8">

        <meta name="googlebot" content="index, follow" />

        <meta name="robots" content="index,follow" />

        <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />

        <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />

        <meta http-equiv="Pragma" content="no-cache" />

        <script src="js/jquery-2.1.1.min.js"></script>    

        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTMtpxeKLL1goekXSe73nSY8mtgK9q2ys&v=3.exp&callback=initMap"></script>

        <script src="jquery.geolocation.edit.js"></script>

    </head>

<script type="text/javascript">

$(document).ready(function() {

 $("#map").geolocate({

    lat: "#lat",

    lng: "#lng"

});

 

});    

</script>

<style>

    #map { width:100%; height:400px; }

</style>

 

<div id="map"></div>

    <input type="hidden" class="txtfield" id="lat" value="54.580570" name="szer">

    <input type="hidden" class="txtfield" id="lng" value="16.862211" name="dl">

 

</body>

</html>

I to mi zwraca:
InvalidValueError: initMap is not a function

Strona jest oczywiście większa, ale to już się sypie nawet w takim małym fragmencie sad.gif
Co mam nie tak w powyższym kodzie?


(pr0100) #2

Hej,

 

zamiast document.ready**(**fn( kod od map)) zrób document.initMap = function() { kod od map }

 

  1. z tego co wiem to dokument ready wykonuje się po tuż wyliczeniu layoutu,  czyli dla Ciebie może być za wcześnie, nie wiem jak działa geolocate

  2. wypadałoby żeby callback który wysyłasz do google istniał (końcówka linku do js map google)


(northwest) #3

gdzie ja mam to znaleść?:slight_smile:


(pr0100) #4

 

czego chcesz szukać? Nie rozumiem :frowning: Podsyłam gotowca

$(document).ready(function() {

 document.initMap = function() {

   $("#map").geolocate({

      lat: "#lat",

      lng: "#lng"

   });

 };

});

zobacz czy to zadziała, jeżeli nie to usuń pierwszą i ostatnią linie i sprawdź jeszcze raz


(northwest) #5

Dziękuje :slight_smile: W każdym wariancie: InvalidValueError: initMap is not a function :frowning:


(pr0100) #6

przenieś

<script async defer src="https://maps.googleapis.com/maps/a … ">

tak aby był pod Twoim skryptem, pozostaw usunięte $(document).ready


(northwest) #7

nic nie dało :frowning:


(pr0100) #8
<!DOCTYPE html>

<html lang="pl">

    <head>

        <meta charset="utf-8">

        <meta name="googlebot" content="index, follow" />

        <meta name="robots" content="index,follow" />

        <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />

        <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />

        <meta http-equiv="Pragma" content="no-cache" />



<script type="text/javascript">

 function initMap() {

	 $("#map").geolocate({

      lat: "#lat",

      lng: "#lng"

   });

</script>

		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTMtpxeKLL1goekXSe73nSY8mtgK9q2ys&v=3.exp&callback=initMap"></script>

<style>

    #map { width:100%; height:400px; }

</style>

		</head><body>

<div id="map"></div>

    <input type="hidden" class="txtfield" id="lat" value="54.580570" name="szer">

    <input type="hidden" class="txtfield" id="lng" value="16.862211" name="dl">

</body>

</html>

podeślij treść błędu


(northwest) #9

http://serwer1356363.home.pl/teste.html

Zwraca:

SyntaxError: missing } after function body

teste.html (wiersz 69, kolumna 5)

InvalidValueError: initMap is not a function

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://serwer1356363.home.pl/teste.html

…){a.apply(b,c)})}};_.hb=function(a){return window.setTimeout(a,0)};jb=function(a…

js?key=…initMap (wiersz 37)


(pr0100) #10
<script type="text/javascript">

 function initMap() {







	 $("#map").geolocate({







      lat: "#lat",







      lng: "#lng"







   });

 }

</script>

uciekł mi jeden }


(northwest) #11

podgrałem. Teraz jest:

ReferenceError: $ is not defined

$("#map").geolocate({

teste.html (wiersz 59, kolumna 3)


(pr0100) #12
<!DOCTYPE html>







<html lang="pl">







    <head>







        <meta charset="utf-8">







        <meta name="googlebot" content="index, follow" />







        <meta name="robots" content="index,follow" />







        <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />







        <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />







        <meta http-equiv="Pragma" content="no-cache" />

        <script src="js/jquery-2.1.1.min.js"></script>    

        <script src="jquery.geolocation.edit.js"></script>



<script type="text/javascript">



 function initMap() {















	 $("#map").geolocate({















      lat: "#lat",















      lng: "#lng"















   });



 }



</script>







		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTMtpxeKLL1goekXSe73nSY8mtgK9q2ys&v=3.exp&callback=initMap"></script>







		



<style>







    #map { width:100%; height:400px; }







</style>







		</head><body>



		



		







<div id="map"></div>







    <input type="hidden" class="txtfield" id="lat" value="54.580570" name="szer">







    <input type="hidden" class="txtfield" id="lng" value="16.862211" name="dl">







</body>







</html>

 


(northwest) #13

ReferenceError: $ is not defined

teste.html (wiersz 93, kolumna 3)

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://serwer1356363.home.pl/teste.html

…){a.apply(b,c)})}};_.hb=function(a){return window.setTimeout(a,0)};jb=function(a…


(pr0100) #14

nie masz jquery na serwerze, nie ma katalogu js

 

http://serwer1356363.home.pl/js/jquery-2.1.1.min.js musi działać


(northwest) #15

pomogło chyba :slight_smile: dziękuje


(pr0100) #16

No problemo, masz chyba jeszcze źle skonfigurowane mapy w panelu google maps

 

wypisze jeszcze zakres zmian które trzeba było wykonać w stosunku do Twojego 1 postu:

  1. funkcja podana jako callback musi być zadeklarowana przed załadowaniem js od map

<script type=“text/javascript”>

  function initMap () {

 

  }

</script>

<script async defer src=“https://maps.googleapis.com/maps/api/js?key=AIzaSyCTMtpxeKLL1goekXSe73nSY8mtgK9q2ys&v=3.exp&callback= initMap”></script>

 

  1. brakowało rozpoczęcia <body>, <head> kończył się za wcześnie

  2. brakowało jsów na serwerze

 

idę spać