Drupal - How to load google api before JavaScript?

Question

I built a custom google map to implement into the front page of my drupal site that uses javascript and php, and i'm having an issue with the google maps api not being called until after the php file that relies on it is called. It is logged in this order in my console:

ReferenceError: google is not defined map.php:6

GET http://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate [HTTP/1.1 200 OK 74ms]

I've been researching my issue online, and have been experimenting from the different resources, but have not had any luck yet. I've provided the ways i'm attempting to call the google map api within my files. I've placed this in my page--front.tpl.php:

<script type="application/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

and here is my entire map.php, which is the php file that holds the google map with javascript and php, and is being called via drupal_add_js in the template.php file:

var script = document.createElement('script');
script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false';
script.type = 'application/javascript';

var map = null;
var infowindow = new google.maps.InfoWindow();
var markers = [


  <?php
  $server = 'db.*****';$user = '*****';$database = '*****';$password = '*****';
  $db = mysqli_connect($server, $user, $password, $database);

  if (isset($_GET['routeselected'])) 
  {
  $result = mysqli_query($db, "SELECT * FROM STOP INNER JOIN RouteStop ON Stop.Stop_ID = RouteStop.Stop_ID WHERE RouteStop.Route_ID = " . (int)$_GET['routeselected'] . " AND RouteStop.Company_ID = " . (int)$_GET['companyselected']);
  while ($row = mysqli_fetch_array($result))
      echo "{\"title\": '".$row['Stop_ID']."', \"lat\": '".$row['Latitude']."', \"lng\": '".$row['Longitude']."', \"description\": '".$row['StopName']."'},";
  }
  ?>

];

window.onload = function () {

var mapOptions = {
    center: new google.maps.LatLng(
        parseFloat(markers[0].lat),
        parseFloat(markers[0].lng)),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var poly = new google.maps.Polyline({map: map, strokeColor: '#F3443C'});

var lat_lng = new Array();
           for (i = 0; i < markers.length; i++) {
           var data = markers[i]
           var myLatlng = new google.maps.LatLng(data.lat, data.lng);
           lat_lng.push(myLatlng);
           var marker = new google.maps.Marker({
               position: myLatlng,
               map: map,
               title: data.title
           });
           (function (marker, data) {
               google.maps.event.addListener(marker, "click", function (e) {
                   infoWindow.setContent(data.description);
                   infoWindow.open(map, marker);
               });
           })(marker, data);
       }
for (var i = 0; i < markers.length; i++) {
    if ((i + 1) < markers.length) {
        var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
                                         parseFloat(markers[i].lng));
        var des = new google.maps.LatLng(parseFloat(markers[i+1].lat), 
                                         parseFloat(markers[i+1].lng));
        service.route({
            origin: src,
            destination: des,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                    path.push(result.routes[0].overview_path[i]);
                }
                poly.setPath(path);
            }
        });
    }
}
} 

Does anyone possibly know the solution to my issue? Thank you for all and any help!

Answer 1

1. I guess you could add the Google Maps Script in your html.tpl.php right at the beginning inside <head>...</head>.

2. Or just use drupal_add_js to load "http://maps.googleapis.com/maps/api/js?sensor=false" in your template.php before you load the map.php. Like this: drupal_add_js('http://maps.googleapis.com/maps/api/js?sensor=false', 'external');

3. Since the google object is not defined in line 6, something with the inclusion of your javascript file has to be wrong (basically lines 1-3 do not seem to work like this ;))...take a look at this StackOverflow post and try using the suggested code: How to include js file in another js file?