topic Thank you, Chris. It appears in Software Archive

GoogleMaps JavaScript API Problem

Anas_F_ — Sat, 30 Apr 2016 15:21:35 GMT

Hello,

I want to ask why this code does not work:

/*jshint browser:true */
/*global $, console, alert */
(function () {
    "use strict";
    /*
      hook up event handlers 
    */

    function register_event_handlers() {

        /* button  #revBtn */
        $(document).on("click", "#revBtn", function (evt) {
               var canvas = document.getElementById("map-div"),
                      m;

               var latlng = new google.maps.LatLng(51.4975941, -0.0803232);

               var options = {
                      center: latlng,
                      zoom: 11,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                m = new google.maps.Map(m, options);
        });

    }
    document.addEventListener("app.Ready", register_event_handlers, false);
})();

The above code is from my index_user_scripts.js

This is what I got from JSHint log:

16	'google' is not defined. (W117)	var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
21	'google' is not defined. (W117)	mapTypeId: google.maps.MapTypeId.ROADMAP
24	'google' is not defined. (W117)	m = new google.maps.Map(m, options);

The map supposed to change to the given latitude and longitude values.

I am using Intel XDK version 3240, using Standard HTML5 Only by designer.

Any idea how do I resolve this?

JSHint simply doesn't know

Chris_P_Intel — Mon, 02 May 2016 16:32:31 GMT

JSHint simply doesn't know about the 'google' namespace. That doesn't necessarily mean there is an actual error.

Do you have the inclusion to the google maps API in your HTML? If using the App Designer google maps widget you should. If you do, then you could add 'google' to the global listing in index_user_scripts.js to remove the JSHint warning.

I'm not sure your code is supposed to change the Lat/Lng. The map object should already be initialized in google_maps.js on startup, and in the Properties of the Google Map you can set the initial center location and zoom.

Your code is initializing a _new_ map object, which should not be needed.

Take a look at google_maps.js (which should be bound into your project). You'll see that window.googleMaps is an array of all the maps set up for your app. So googleMaps[0] should be your Google Map. To affect it, use the Google Maps API.

For example:

googleMaps[0].setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

will change the center point of the map.

For more information on the Google Maps API see https://developers.google.com/maps/documentation/javascript/

Hope this helps,

Chris

Thank you, Chris. It appears

Anas_F_ — Tue, 03 May 2016 05:59:51 GMT

Thank you, Chris. It appears that this code works now despite won't work before. Yes, i have checked all the js inclusion in the head tag, all js included. Thanks again.