2016-05-02 12 views
0

RequireJS + Laravel 5 + Gmaps + async = nicht funktioniertgmaps + requirejs + async + Laravel 5: Kann nicht gmaps laden async

Kann jemand mir helfen, mit dem Laden Google Maps mit Asynchron-Plugin? Ich habe auch goog Plugin versucht, aber es war auch nicht erfolgreich.

Es wirft folgende Fehlermeldung: enter image description here

I Karte synchronisch nur geladen werden kann, aber es ist unsicher.

hier ist mein Code:

welcome.blade.php

<head> 
    <title>Roads API Demo</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/css/style.css') }}"> 
    <script data-main="{{ URL::asset('assets/js/config') }}" type="application/javascript" src="{{ URL::asset('assets/js/lib/require.js') }}"></script> 
</head> 

Vermögenswerte/js/gmapsApi.js

define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() { 
    console.log("HIIIIIIIIIIIIII"); 

    // When I delete async and put only 
    // http://maps.google.com/maps/api/js?sensor=false 
    // Then works fine . 
}); 

assets/js/config. js

requirejs.config({ 
    baseUrl: "assets/js/lib", //require.js path=assets/js/lib/require.js 
    paths: { 
     main: "../main", 
     gmapsApi : "../gmapsApi" 
    }, 
    waitSeconds: 0 
}); 

requirejs(["gmapsApi"]); 

WICHTIGER HINWEIS: require.js path = assets/js/lib/require.js

Alle Skripte gut geladen werden, überprüfte ich Quellen und Netzwerk-Registerkarte in Chrom.

in Modul assets/js/gmapsApi.js

Problem: async! http://maps.google.com/maps/api/js?sensor=false

Arbeiten fein: http://maps.google.com/maps/api/js?sensor=false

Antwort

0

Es sieht aus wie HTTPS-Protokoll auf meinem lokalen Server (vhost) benötigt wird, da Google Maps-APIs bieten nur für Server, die als sichere Herkunft über HTTP behandelt werden (HTTPS-Protokoll).

Hire Link: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Also in meinem gmapsApi.js auch url biete ich Karten über https-Protokoll Google (die erforderlich ist, weil ich schon meinem lokalen Server auf HTTPS-Protokoll festgelegt)

Vermögenswerte /js/gmapsApi.js

define(['async!https://maps.googleapis.com/maps/api/js?v=3&libraries=places'], function() { 
     console.log("HIIIIIIIIIIIIII"); 
    }); 

Das löste Problem für mich. Und gmaps api werden asynchron geladen (mit async plugin).