Я унаследовал старый скрипт и должен заставить его работать. Когда я запускаю HTML-файл локально, все работает нормально. Но он не будет работать, если он размещен на ULR.
При правильной работе (локально) скрипт берет адрес улицы и преобразует его в долготу и широту, размещая маркер на карте в нужном месте. Затем он позволяет пользователю перемещать маркер, обновляя координаты.
При неправильной работе (размещено) скрипт не обновляет карту и не может получить правильные координаты для указанного адреса.
Я уверен, что это что-то простое, так как оно отлично работает, пока я не переместлю его на размещенный URL.
размещенный URL-адрес: http://bvcb.bluecubevillage.com/gmap.html, а архивная версия (для загрузки) - 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>