• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

GOOGLE MAP, całkowicie nie działa

VPS Starter Arubacloud
0 głosów
738 wizyt
pytanie zadane 13 maja 2016 w JavaScript przez makoso Mądrala (7,380 p.)
edycja 13 maja 2016 przez makoso

Próbuję umieścić mapkę z markerem na mojej stronie wygenerowałem api key, po wstawieniu całego kodu dostaję error:
Uncaught InvalidValueError: init_map is not a function
kod:

HTML:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDFzvDik3ZzAWI0s85hr2CPI14nzyERAAQ&callback=init_map"></script>
    <div id="gmap"></div>

JS:

function init_map(){
    var myOptions = {
        zoom:16,
        center:new google.maps.LatLng(52.1850022,21.65786830000002),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#gmap'), myOptions);
    marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(52.1850022, 21.65786830000002)
    });
    infowindow = new google.maps.InfoWindow({
        content:"<b>Restauracja GASTRO</b><br/>Mi&#322;a 5<br/> Jan&oacute;w"
    });
    google.maps.event.addListener(marker, "click", function(){
        infowindow.open(map,marker);});infowindow.open(map,marker);
    google.maps.event.addDomListener(window, 'load', init_map);
}

EDIT:

JS
 

var latlng = new google.maps.LatLng(52.1850022,21.65786830000002);
    var settings = {
        zoom: 12,
        center: new google.maps.LatLng(52.1850022,21.65786830000002),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
        draggable: true,
        navigationControl: false
    };

    var map = new google.maps.Map(document.getElementById("gmap"), settings);

    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });

    var contentString = '<div class="map-tooltip">'+
        '<h6>Restauracja Gastro <span class="amber-text text-accent-3"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></h6>'+
        '<p>Loreum ipsum, Loreum ipsum, Loreum ipsum, Loreum ipsum, <br/>' +
        'Adres: Piękna miejscowość ul. miła 5<br/>' +
        'Tel: 000 000 000</p>'+
        '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var companyImage = new google.maps.MarkerImage('http://www.fbmazur.intersid.pl/images/map-pin.png',
        new google.maps.Size(40,70),<!-- Width and height of the marker -->
        new google.maps.Point(0,0),
        new google.maps.Point(20,55)
    );

    var companyPos = new google.maps.LatLng(52.1850022,21.65786830000002);

    var companyMarker = new google.maps.Marker({
        position: companyPos,
        map: map,
        icon: companyImage,
        zIndex: 3});
    google.maps.event.addListener(companyMarker, 'click', function() {
        infowindow.open(map,companyMarker);
    });
    infowindow.open(map,companyMarker);

 

komentarz 13 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ale prosiłem o kod HTML, gdzie są miejsca w których umieszczasz skrypty JS. Bo błedy typu "Uncaught InvalidValueError: init_map is not a function" oznaczają, że jakaś funkcja może być niewidoczna, np. z powodu scope. Kolejność umieszczenia funkcji w skrypcie i w HTML też ma znaczenie, bo jeśli masz coś w <head> to będzie się to wywoływać jako pierwsze i jeśli stamtąd leci callback do funkcji, która jest w <body> to może być problem - funkcje z <body> nie zdążą się załadować, gdy z head leci do nich zapytanie (tzn. gdy je tam wywołujesz).

komentarz 13 maja 2016 przez makoso Mądrala (7,380 p.)
tyle wiem, robiłem na różne sposoby próbowałem z asynchronicznym ładowaniem, ustawianiem w wywoływaniem w odpowiedniej kolejności w HTML-u, teraz śmiga ;)
komentarz 13 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)
Czyli już działa?
komentarz 13 maja 2016 przez makoso Mądrala (7,380 p.)
tak

3 odpowiedzi

+2 głosów
odpowiedź 13 maja 2016 przez Mavimix Dyskutant (8,390 p.)
Jak wpiszesz konkretny adres na Google Maps to tam gdzieś powinna być opcja "udostępnij" i gdzieś tam powinien być kod html.
komentarz 13 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Hmm... w sumie szybki, prosty i przyjemny sposób :) Mapa wstawia się jako <iframe>

komentarz 13 maja 2016 przez makoso Mądrala (7,380 p.)
Zapisałem wyżej kod JS, zwędziłem z innej strony, edytowałem do swoich parametrów, oraz najważniejsze:
-wywaliłem callback
-blok z mapą musi mieć sztywno określoną wysokość
teraz działa, ponieważ projekt edukacyjny udostępniam link, mapka na dole strony:
http://kmakowski.nazwa.pl/restauracja/pages/
jak Możesz to napisz jakieś błędy które widać, co można dodać? oprócz animacji które dopiszę ;)
dzięki za odpowiedź w pytaniu :)
0 głosów
odpowiedź 13 maja 2016 przez zkkf56 Dyskutant (8,710 p.)
Chcesz wstawić na swoją stronę mapę google?
komentarz 13 maja 2016 przez makoso Mądrala (7,380 p.)
tak, jej kawałek o określonej lokalizacji ;)
Przykład:
http://www.fbmazur.pl/pl/kontakt-7.html
na dole strony
komentarz 13 maja 2016 przez zkkf56 Dyskutant (8,710 p.)
Robisz tak:

1.Wchodzisz w google

2.Wpisujesz dane miejsce

3.Wchodzisz w mapy

4.Wciskasz "Udostępnij"

5.Otworzy ci się okienko. Wejdź w zakładkę "Umieść Mapę"

6.Skopiuj kod

7.I wklej go na swoją stronę

GOTOWE!!!
0 głosów
odpowiedź 13 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

W którym miejscu HTML umieściłeś skrypt JS z funkcją init_map()? najlepiej pokaż miejsca, w których umieściłeś oba skrypty - zarówno ten podpinający API, jak i ten z funkcją init_map()

Poza tym, zmienne mapmarkerinfoWindow zadeklarowałeś jako zmienne globalne (to już akurat inny błąd), gdyż nie napisałeś przed nimi słówka var. Jeśli chcesz tworzyć ciąg zmiennych pisząc słówko var raz, to nie stawiaj po każdej zmiennej średnika, tylko przecinek.

komentarz 13 maja 2016 przez makoso Mądrala (7,380 p.)
Zapisałem wyżej kod JS, zwędziłem z innej strony, edytowałem do swoich parametrów, oraz najważniejsze:
-wywaliłem callback
-blok z mapą musi mieć sztywno określoną wysokość
teraz działa, ponieważ projekt edukacyjny udostępniam link, mapka na dole strony:
http://kmakowski.nazwa.pl/restauracja/pages/
jak Możesz to napisz jakieś błędy które widać, co można dodać? oprócz animacji które dopiszę ;)
​dzięki za odpowiedź w pytaniu :)

Podobne pytania

0 głosów
1 odpowiedź 1,258 wizyt
pytanie zadane 9 lutego 2016 w HTML i CSS przez Mateusz Stawicki Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 165 wizyt
pytanie zadane 24 grudnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 8 lipca 2016 w HTML i CSS przez artix132 Użytkownik (870 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...