Google maps API showing blank map when given LatLng cords from HTML5 Geolocation

Google maps API showing blank map when given LatLng cords from HTML5
Geolocation

I'm trying to use HTML5's geolocation features. I have a script to get the
coordinates and then another to use those coordinates in a call to the
Google Maps API. If I manually specify the Latitude and Longitude it works
great, but for some reason it won't work this way. I believe the code is
correct but maybe I overlooked something.
Here's the code:
var x = document.getElementById("msg");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
showError);
}
else { x.innerHTML = "Geolocation is not supported by this
browser."; }
}
function showPosition(position) {
var mapOptions = {
center: new google.maps.LatLng(position.coords.latitude + ", "
+ position.coords.longitude),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("Map"),
mapOptions);
var acOptions = {
types: ['establishment']
};
var autocomplete = new
google.maps.places.Autocomplete(document.getElementById('autocomplete'),
acOptions);
autocomplete.bindTo('bounds', map);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed',
function () {
infoWindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
infoWindow.setContent('<div><strong>' + place.name +
'</strong><br />');
infoWindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function (e) {
infoWindow.open(map, marker);
});
});
var x = document.getElementById("msg");
x.innerHTML = position.coords.latitude + ", " +
position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
google.maps.event.addDomListener(window, 'load', getLocation);