Question

7

GoogleMaps does not load on page load

rated 0 times [ 13] [ 6] / answers: 1 / hits: 50980 / 9 Years ago, fri, december 25, 2015, 12:00:00

I can't get my map running using the GoogleMaps API V3. The map does not load. I would expect the map to appear in the div with the id gisMap but in the Chrome Debugger I get the message:

Uncaught InvalidValueError: initMap is not a function

Javascript

var map;



function initMap() {

    // Enabling new cartography and themes

    google.maps.visualRefresh = true;



    // Setting starting options

    var mapOptions = {

        center: new google.maps.LatLng(39.9078, 32.8252),

        zoom: 10,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };



    // Getting Map DOM Element

    var mapElement = document.getElementById('gisMap');



    // Creating a map with DOM element

    map = new google.maps.Map(mapElement, mapOptions);

}

Bundle.js (excerpt)

(...)

module.exports = Vue;

}).call(this,require('_process'))

},{_process:1}],3:[function(require,module,exports){

'use strict';



var map;



function initMap() {

    // Enabling new cartography and themes

    google.maps.visualRefresh = true;



    // Setting starting options

    var mapOptions = {

        center: new google.maps.LatLng(39.9078, 32.8252),

        zoom: 10,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };



    // Getting Map DOM Element

    var mapElement = document.getElementById('gisMap');



    // Creating a map with DOM element

    map = new google.maps.Map(mapElement, mapOptions);

}



},{}],4:[function(require,module,exports){

'use strict';



var Vue = require('vue');



new Vue({});

(...)

HTML

<!doctype html>

<html lang=en>



    <head>

    <meta charset=UTF-8>

    <title>MFServer Test</title>



    <link rel=stylesheet href=/css/app.css>

</head>

    <nav class=navbar navbar-inverse navbar-fixed-top>

    <div class=container>

        <div class=navbar-header>

            <button type=button class=navbar-toggle collapsed data-toggle=collapse data-target=#navbar aria-expanded=false aria-controls=navbar>

                <span class=sr-only>Toggle navigation</span>

                <span class=icon-bar></span>

                <span class=icon-bar></span>

                <span class=icon-bar></span>

            </button>

            <a class=navbar-brand href=#>MFDispo</a>

        </div>

        <div id=navbar class=collapse navbar-collapse>

            <ul class=nav navbar-nav>

                <li class=active><a href=#>Start</a></li>

                <li><a href=#about>GIS</a></li>

            </ul>

        </div><!--/.nav-collapse -->

    </div>

</nav>



    <body id=app>

        <div class=pageWrapper>

            <div id=gisMap></div>

            <div id=content></div>

        </div>



        <script src=/js/bundle.js></script>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js integrity=sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A== crossorigin=anonymous></script>

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap async defer></script>

    </body>



</html>

SCSS

@import node_modules/bootstrap-sass/assets/stylesheets/bootstrap;

@import partials/forms;



html, body {

  height: 100%;

  padding-top: 25px;

}



.pageWrapper {

  background-color: red;

  height:100%;

  width: 100%;

}



#gisMap {

  height: 100%;

  width: 50%;

  background-color: green;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucillemariselal

Add To Favorites

Follow

Total Points: 108

Total Questions: 97

Total Answers: 119

Location: Thailand

Member since Thu, May 6, 2021

3 Years ago

answered 9 Years ago alysas · Accepted Answer

Make sure that initMap function is visible from the global scope or the parameter passed as callback to google maps.js is properly namespaced.
In your case, the quickest solution will be replacing:

function initMap(){

//..

}

to:

window.initMap = function(){

//...

}

or namespace version:

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap async defer></script>

//Edit:

I see that in your code snippet you use some async module loading (require.js?) and the code in which you create window.initMap function does not get executed unless you call the module that contains this declaration. So you have not fulfilled the first condition that I've mentioned - the initMap must be visible from the global scope before you call google maps.js.