GOOGLE MAP, całkowicie nie działa

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:

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

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 :)

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!!!

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 map, marker, infoWindow 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.