title: Google Maps not working on Chrome
body: <p>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.</p>
  
  <p>External map.html</p>
  
  <pre><code>&lt;script type="text/javascript" src="JS/location.js"&gt;&lt;/script&gt;
  &lt;div id="mapContainer"&gt;&lt;/div&gt;
  &lt;div id="writtenDir"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS to load content:</p>
  
  <pre><code>  $('#Contact').click(function () {
      $('#centerPane').load('External/map.html');
      $.getScript("JS/location.js");
    });
  </code></pre>
  
  <p>Location.js</p>
  
  <pre><code>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 
    });
  }
  </code></pre>
  
  <p>Div to be loaded into:</p>
  
  <pre><code>&lt;div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Why is the map not showing in Google Chrome?
  (live link, press "Contact Us" - <a href="http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php" rel="nofollow">http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php</a>)</p>