Using drupal_add_js with google maps

Question

I want to pass down an array to my javascript. So that i could create markers on google map.

By doing this:

drupal_add_js('https://maps.googleapis.com/maps/api/js?key=AIzaSyDcl28Qcn9GTi02rRtQaLgVS4GWZbGcQ8E', 'external');
$settings['myModule']['location'] = db_query('SELECT * FROM {locations}')->fetchAll();
drupal_add_js($settings, 'setting');
drupal_add_js('sites/all/modules/GoogleMapByDave/DGMap.js','external');

The javascript that is DGMap.js dosnt seem to work.

Here is the js in the DGMap.js:

(function($) {
Drupal.behaviors.myModule = {
attach: function(context, settings) {

  //var locations = Drupal.settings.myModule.locations;

 function initialize() {

    var mapOptions = {
      center: { lat: 56.9714744, lng: 24.1291624},
      zoom: 9
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    var locations = [
                    ['Mājas',56.956344, 24.197409],
                    ['Domina',56.966058, 24.162004]
                    ];

    for (var i = 0; i < locations.length; i++) {

      var loc = new google.maps.LatLng(locations[i][1], locations[i][2]);

      var marker = new google.maps.Marker({
        position: loc,
        map: map,
        title: locations[i][0]
      });
    };

     }

      google.maps.event.addDomListener(window, 'load', initialize);

   }
   }
)(jQuery);

But if I add it through the module as an inline it works! But I dont know if i can use the variables there?

drupal_add_js('jQuery(document).ready(function () { function initialize() {

    var mapOptions = {
      center: { lat: 56.9714744, lng: 24.1291624},
      zoom: 9
    };
    var map = new google.maps.Map(document.getElementById(\'map-canvas\'),
        mapOptions);

    var locations = Drupal.settings.myModule.locations;

    var locations = [
                    [\'Mājas\',56.956344, 24.197409],
                    [\'Domina\',56.966058, 24.162004]
                    ];

    for (var i = 0; i < locations.length; i++) {

      var loc = new google.maps.LatLng(locations[i][\'locationLat\'], locations[i][\'locationLng\']);

      var marker = new google.maps.Marker({
        position: loc,
        map: map,
        title: locations[i][\'locationTitle\']
      });
    };

  }

  google.maps.event.addDomListener(window, \'load\', initialize); });','inline');

EDIT//////////////////////

I got further in this. Adding script like this:

$path = drupal_get_path('module', 'GoogleMapByDave');
drupal_add_js($path . '/DGMap.js', array('weight' => 1));

And the script:

  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {

var mapOptions = {
    center: { lat: 56.9714744, lng: 24.1291624},
    zoom: 9
};

var locations = Drupal.settings.GoogleMapByDave.locations;
alert(locations);

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

var locations = [
                ['Mājas',56.956344, 24.197409],
                ['Domina',56.966058, 24.162004]
                ];

for (var i = 0; i < locations.length; i++) {

  var loc = new google.maps.LatLng(locations[i][1], locations[i][2]);

  var marker = new google.maps.Marker({
      position: loc,
      map: map,
      title: locations[i][0]
      });
  };
}
};

Now the script is runned. But the problem now is that how can i get settings? I get unidentified from "locaitons" var.

Btw i changed the $settings['GoogleMapByDave']['location'] part.

Answer 1

You should add your array in the Drupal.settings object.

In your module, you should use drupal_add_js, with the setting option :

drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');

It makes your array accessible in javascript. It is stored in the Drupal.settings javascript object. From your js easily access your array :

console.log(Drupal.settings.myModule); // returns your array
console.log(Drupal.settings.myModule.key); // returns "value"

The Drupal.settings object is available from page load, and is refreshed each time you use Drupal ajax functions.

Answer 2

Your DGMap.js script isn't external, you should use file as type parameter instead.

drupal_add_js('sites/all/modules/GoogleMapByDave/DGMap.js', 'file');

or use an absolute path.

drupal_add_js('http://example.com/yourscript.js', 'external');