如何向页面增加地图

你好！最近我在学《Head First HTML5 programming》，遇到了一个问题，就是向页面增加地图，可是代码写对了，还是没法显示。运行的浏览器是Google Chrome，Firefox，请问前辈们这是什么问题？谢谢！

js代码如下：
var ourCoords = {
latitude: 47.624851;
longitude: -122.52099
};

window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation, displayError);
} else {
alert("Oops, no geolocation support");
}
}

function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;

var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

showMap(position.coords);
}

function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);

var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;

return distance;
}

function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}

function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude,
coords.longitude);
var mapOptions = {
zoom: 10,
center: googleLatAndLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
}

function displayError(error) {
var errorTypes = {
0: "Unknown error",
1: "Permission denied",
2: "Position is not available",
3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}

---

我猜《Head First HTML5 programming》这本书是以谷歌地图为例子的吧。不要意思，在国内已经无法访问google提供的服务了，包括地图服务。
你可以使用符合本国国情的地图服务，比如百度、腾讯、高德等，建议使用百度地图，因为它的使用率是第一的。它的api地址是：http://developer.baidu.com/map/reference/index.php
demo地址：http://developer.baidu.com/map/jsdemo.htm#a1_2

希望能帮到你。

---

腾讯地图和百度地图都有js代码提供，到官网查查就知道，这跟html5没关系，还有谷歌被封锁，不用试