だから私は地理位置情報でこのgoogleMapのことを試していました。コードをコピーして貼り付けただけですが、マップを表示することはできませんでした。ブラウザは自分の場所を取得するように求めますが、地図は表示されません。（ああ、Google APIキーを使用して呼び出しました）
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<style type="text/css">
<meta charset="utf-8">
<title>Geolocation API getCurrentPosition example</title>
<style>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDBy_moo4fAc2Z2DmSLBayqjry_VkthwyU&sensor=false">
<script type="text/javascript" src="http://maps.gstatic.com/intl/pt_pt/mapfiles/api-3/10/19/main.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bcommon,util,stats%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bmap,marker,infowindow%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bonion%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bcontrols%7D.js">
</style>
</head>
<body>
<p>Click on the marker for position information.</p>
<div id="map" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; cursor: url("http://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 200;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 201;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 202;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 100;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
</div>
</div>
<div style="margin: 2px 5px 2px 2px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 0px; bottom: 0px;">
<div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 475px; top: 310px;">
<div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint" style="display: none; font-size: 10px; height: 17px; background-color: rgb(245, 245, 245); border: 1px solid rgb(220, 220, 220); line-height: 19px; position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint" style="margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" controlwidth="78" controlheight="356">
<div class="gmnoprint" style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; right: 0px; top: 0px;">
</div>
</div>
<script>
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function displayPosition(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 10,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: "User location"
});
var contentString = "<b>Timestamp:</b> " + parseTimestamp(position.timestamp) + "<br/><b>User location:</b> lat " + position.coords.latitude + ", long " + position.coords.longitude + ", accuracy " + position.coords.accuracy;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
function parseTimestamp(timestamp) {
var d = new Date(timestamp);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var msec = d.getMilliseconds();
return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
}
</script>
<div id="YontooInstallID" style="display: none;">E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
<div id="Y2PluginIds" style="display: none;">Y2:E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
</body>
</html>
</style>
</head>
<body>
<div id="YontooInstallID" style="display: none;">E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
<div id="Y2PluginIds" style="display: none;">Y2:E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
</body>
</html>