1
私は古いスクリプトを継承しています。 HTMLファイルをローカルで実行すると、すべて正常に動作します。しかし、それがULRでホストされているときは機能しません。Google Maps API v2 - ライブURLでは動作しませんが、ローカルで正常に動作します
正確に（ローカルに）作業するとき、スクリプトは住所を取得して、それを適切な場所にマップ上に置くことで距離と緯度に変換します。その後、マーカーを移動して座標を更新することができます。
誤って動作している（ホストされている）場合、スクリプトはマップを更新せず、指定されたアドレスの正しい座標をフェッチできません。
私はホストされたURLに移動するまで完全に動作するので、何か簡単だと感じます。
ホストされているURLはhttp://bvcb.bluecubevillage.com/gmap.htmlにあり、（ダウンロード用）zip形式のバージョンは、私はまた、以下のソースを貼り付けていhttp://bvcb.bluecubevillage.com/gmap.zip
である：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Basic Google Map example</title>
<style type="text/css">
<!--
body,div,h1,h2,p,form {
font-family: verdana,arial,helvetica,sans-serif;
font-size:10px;
}
.formcontainer {
width:60%;
}
form div {
}
dl {
}
dt {
float: left;
clear: left;
width: 65px;
text-align: right;
}
dd {
margin: 0 0 0 75px;
padding: 0 0 0.5em 0;
}
label {
line-height: 18px;
}
input[type=submit]{
}
h1{
font-size:12px;
padding:0;
margin:20px 0 10px 0;
}
p.instructions{
font-weight: bold;
}
-->
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCYI244v8KiuklwZ_1Y1ce9f5r0WoSkJTk"
type="text/javascript"></script>
<script type="text/javascript">
function returnCoords(){
parent.document.getElementById('longitude').value = document.getElementById('longBox').value;
parent.document.getElementById('latitude').value = document.getElementById('latBox').value;
parent.TINY.box.hide();
}
//<![CDATA[
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.460670, -41.835938), 2);
map.addControl(new GSmallMapControl()); // ADD CONTROL FOR PAN AND ZOOM
map.addControl(new GMapTypeControl()); // ADD CONTROL FOR MAP/SAT/HYBRID VERSIONS
geocoder = new GClientGeocoder();
//GEvent.addListener(map, "moveend", function() {
// makeCoords();
//});
var newcenter = map.getCenter();
var marker = new GMarker(newcenter, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
function showAddress(address, city, country) {
var fulladdress;
// make sure the Geocoder only picks up city/country if nothing else available
if ((address=="") || (city=="") || (country =="")){
fulladdress = address;
}
else {
fulladdress = address + ' ' + city + ' ' + country;
}
if (geocoder) {
// test if full address exists
geocoder.getLatLng(fulladdress, function(point) {
if (!point) {
// test if city exists
geocoder.getLatLng(city, function(point1) {
if (!point1) {
// test if country exists
geocoder.getLatLng(country, function(point2) {
if (!point2) {
//point2 = '(35.460670, -41.835938)';
//map.setCenter(point2, 3);
var newcenter = map.getCenter();
var marker = new GMarker(newcenter, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
else {
map.setCenter(point2, 3);
var marker = new GMarker(point2, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
);
}
else {
map.setCenter(point1, 12);
var marker = new GMarker(point1, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
);
}
else {
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
// marker.openInfoWindowHtml(fulladdress);
}
}
);
makeCoords();
}
}
function makeCoords() {
var center = map.getCenter();
var myCenterString = new String(center);
var myCenterArray = tidyUp(myCenterString);
zoomLevel = map.getZoom();
document.myform1.latBox.value = myCenterArray[0];
document.myform1.longBox.value = myCenterArray[1];
//document.myform1.zoomBox.value = zoomLevel;
}
function clearBoxes(){
document.myform.myaddress.value = "";
document.myform.mycity.value = "";
document.myform.mycountry.value = "";
}
function tidyUp(string){
string = '' + string;
splitstring = string.split(" ");
string = unsplitit(splitstring);
splitstring = string.split("(");
string = unsplitit(splitstring);
splitstring = string.split(")");
string = unsplitit(splitstring);
splitstring = string.split(",")
for(i = 0; i < splitstring.length; i++){
splitstring[i] = parseFloat(splitstring[i]);
splitstring[i] = splitstring[i].toFixed(6); // 6 decimal places only
}
return splitstring;
}
function unsplitit(tarray){
var tstring = "";
for(i = 0; i < tarray.length; i++){
tstring += tarray[i];
}
return tstring;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px; height:400px"></div>
<div style="width:300px;float:left;">
<h1>Enter location details here</h1>
<form action="#" name="myform" id="myform" onsubmit="showAddress(this.myaddress.value, this.mycity.value, this.mycountry.value); return false">
<dl>
<dt><label for="myaddress">Address:</label></dt>
<dd><input type="text" size="20" name="myaddress" value="" /></dd>
<dt><label for="mycity">City:</label></dt>
<dd><input type="text" size="20" name="mycity" value="" /></dd>
<dt><label for="mycountry">Country:</label></dt>
<dd><input type="text" size="20" name="mycountry" value="" /></dd>
</dl>
<dt> </dt><dd><input type="submit" value="Get Co-ordinates" /></dd>
</form>
</div>
<div style="width:290px;float:left">
<h1>Enter/Retrieve Geocodes here</h1>
<form name="myform1" id="myform1">
<dl>
<dt><label for="myaddress">Latitude:</label></dt>
<dd><input type="text" id="latBox" size="10" /></dd>
<dt><label for="myaddress">Longitude:</label></dt>
<dd><input type="text" id="longBox" size="10" /></dd>
<dt> </dt><dd>You may drag the location icon to refine location</dd>
<dt> </dt><dd><button onclick="returnCoords()">Click to Finish</button></dd>
</dl>
</form>
</div>
</body>
</html>