0

I know this question has been asked for multiple times, but when i saw the other same questions, it can't solve my problem. So when i want to load Google Maps API it got error ReferenceError: google is not defined

so this is my code when loading source javascript in backbone.js

// This is the runtime configuration file.  It complements the Gruntfile.js by
// supplementing shared properties. 
require.config({

// Initialize the application with the main application file
deps: ["main"],
waitSeconds: 200,

// Set url arguments add timestamp for development purpose
//urlArgs: (window.location.host === "localhost" ? "_=" + (new Date()).getTime() : ""),

paths: {
    // Core
    "almond": "../assets/js/almond/almond",
    "underscore": "../assets/js/lodash/lodash.underscore",
    "jquery": "../assets/js/jquery/jquery-1.11.1",
    "backbone": "../assets/js/backbone/backbone",

    // Extra
    "backbone.layoutmanager": "../assets/js/backbone.layoutmanager/backbone.layoutmanager",
    "metronic": "../assets/js/metronic",
    "layout": "../assets/js/layout",
    "bootstrap": "../assets/js/bootstrap/bootstrap.min",
    //"datatables": "../assets/js/datatables/jquery.dataTables",
    //"datatables-bootstrap": "../assets/js/datatables/dataTables.bootstrap",
    "highcharts": "../assets/js/highcharts/highcharts",
    "highcharts-more": "../assets/js/highcharts/highcharts-more",
    "login":"../assets/js/login",
    "excanvas":"../assets/js/excanvas.min",
    "jquery-ui":"../assets/js/jquery-ui-1.10.3.custom.min",
    "respond":"../assets/js/respond.min",
    "datepicker":"../assets/js/bootstrap/bootstrap-datepicker",
    "heatmap":"../assets/js/modules/heatmap",
    "serializeobject": "../assets/js/serialize-object",
    "jquery.validation": "../assets/js/jquery.validation/jquery.validate",
    "jquery.validation.additional": "../assets/js/jquery.validation/additional-methods",
    "md5": "../assets/js/md5/md5",
    "phpjs.unserialize": "../assets/js/phpjs/var/unserialize",
    "jquery.cookie": "../assets/js/jquery.cookie/jquery.cookie",
    "datejs":"../assets/js/modules/date",
    "chosen":"../assets/js/chosen/chosen.jquery",
    "prism": "../assets/js/chosen/docsupport/prism",
    "autocomplete": "../assets/js/autocomplete/jquery.autocomplete.min",
    "currency": "../assets/js/autocomplete/currency-autocomplete",
    "ajax-chosen":"../assets/js/chosen/ajax-chosen.min",
    "resize-crop":"../assets/js/resizecrop/jquery.resizecrop-1.0.3.min",
    "fancyapps":"../assets/js/fancyapps/jquery.fancybox.pack",
    "noty":"../assets/js/noty/packaged/jquery.noty.packaged.min",
    //"leaflet":"../assets/js/leaflet/leaflet"
    //"exporting":"../assets/js/modules/exporting"
    "fileupload":"../assets/js/fileupload/jquery.form.min",
    "moment":"../assets/js/moment/moment",
    "jquery.growl": "../assets/js/jquery.growl/jquery.growl",
},
shim: {
    "underscore": {
        "exports": "_"
    },
    "backbone": {
        "deps": ["jquery", "underscore"],
        "exports": "Backbone"
    },
    "backbone.layoutmanager": {
        "deps": ["jquery", "backbone", "underscore"],
        "exports": "Backbone.Layout"
    },
    "bootstrap":["jquery"],
    //"datatables": ["jquery"],
    //"datatables-bootstrap": ["jquery", "datatables", "bootstrap"],
    "highcharts": ["jquery"],
    "highcharts-more": ["jquery", "highcharts"],
    "metronic":["jquery","chosen"],
    "layout":["jquery", "metronic"],
    "login":["jquery"],
    "excanvas":["jquery"],
    "jquery-ui": ["jquery"],
    "respond": ["jquery"],
    "datepicker":["jquery"],
    "heatmap":["jquery", "highcharts"],
    "serializeobject": ["jquery"],
    "jquery.validation": ["jquery"],
    "jquery.validation.additional": ["jquery", "jquery.validation"],
    "md5": ["jquery"],
    "jquery.cookie":["jquery"],
    "chosen":["jquery"],
    "prism":["jquery"],
    "autocomplete":["jquery"],
    "currency":["jquery"],
    "ajax-chosen":["jquery"],
    "resize-crop":["jquery"],
    "fancyapps":["jquery"],
    //"leaflet":["jquery"]
   // "exporting":["jquery-ui"]
    "fileupload":["jquery"],
    "jquery.number":["jquery"],
    "gmaps": {
        deps: ["http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize"],
        exports: "GMaps"
    },
    "jquery.growl":["jquery"]

},
urlArgs: ("_=" + (new Date()).getDate())
});

and this is when i use it in a function

this.map = new google.maps.Map(document.getElementById('map-store'), {
     center: {lat: -2.251617, lng: 120.278320},
     scrollwheel: true,
     zoom: 4
});

is there something wrong in my code ?? Thank you.

  • This might help: http://stackoverflow.com/questions/23365972/require-js-lazy-loading-remote-url – J. Titus Mar 09 '16 at 22:14
  • Your exports should have the same name as the global created by that library. which I think is `google`. how does require know what is `gmaps` from your configuration..? and how are you requiring this in your module? – T J Mar 10 '16 at 04:11

0 Answers0