gmaps + requirejs + async + laravel 5 : Cannot load gmaps using async

Question

RequireJS + Laravel 5 + Gmaps + async = not working

Can somebody help me with loading google maps using async plugin ? I also tried goog plugin but it was unsuccessful too.

It throws following error:

I can load map only synchronically but it is unsafe.

here is my 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>

assets/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"]);

IMPORTANT NOTE : require.js path=assets/js/lib/require.js

All scripts are loaded good, I checked Sources and Network tab in chrome.

in module assets/js/gmapsApi.js

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

Working fine : http://maps.google.com/maps/api/js?sensor=false

Dulo Dulo · Accepted Answer · 2016-05-04T16:16:28

It looks like HTTPS protocol is needed on my local server (vhost) because google maps is provide apis only for servers that are treated as a secure origin over HTTP (HTTPS protocol).

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

So in my gmapsApi.js I also provide url to google maps over https protocol (which is required, because I already set my local server on https protocol)

assets/js/gmapsApi.js

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

This solved problem for me. And gmaps api are loaded asynchronously (using async plugin).

gmaps + requirejs + async + laravel 5 : Cannot load gmaps using async

1 Answers