Google Maps无法在Chrome上运行

Question

I have a function that gives the user directions from their location to a fixed location on a map. It is being loaded in as external content to populate a main div, the map shows fine on both IE and Firefox but when I view it in Chrome it does not show. The Chrome dev console shows that the content is being loaded into the div and it is not putting out any errors.

External map.html

<script type="text/javascript" src="JS/location.js"></script>
<div id="mapContainer"></div>
<div id="writtenDir"></div>

JS to load content:

  $('#Contact').click(function () {
    $('#centerPane').load('External/map.html');
    $.getScript("JS/location.js");
  });

Location.js

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo);
} else {
  noGeoInfo();
}

function geoInfo(position) {
  navigator.geolocation.getCurrentPosition(function (position) { 
    var latitude = position.coords.latitude;                    
    var longitude = position.coords.longitude;                 
    var coords = new google.maps.LatLng(latitude, longitude); 
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {  
      zoom: 15,        
      center: coords, 
      mapTypeControl: true, 
      navigationControlOptions:
      {
        style: google.maps.NavigationControlStyle.SMALL 
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions); 
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById(''));
    var request = {
      origin: coords, 
      destination: '54.861283, -6.326805', 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
    };
    directionsService.route(request, function (response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  });
}

function noGeoInfo() { 
  var location = new google.maps.LatLng(54.861283, -6.326805); 
  var mapOptions = { 
    center: location, 
    zoom: 15, //Sets zoom level (0-21)
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };
  var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
  marker = new google.maps.Marker({  
    position: location, 
    map: map 
  });
}

Div to be loaded into:

<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

Why is the map not showing in Google Chrome? (live link, press "Contact Us" - http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php )

Answer 1

The problem resides inside the Nav.js file at line 59:

google.maps.event.trigger(map, 'resize');

The map is undefined when this line is executed.

Ensure that your js files are loaded in the right order and that the map is always defined before triggering the resize event.

I hope this helps.