Я довольно долго пользовался версией 2 и решил, что пришло время перейти к версии 3 в рамках крупного обновления сайта. Я основал весь свой код на « учебнике Майка Уильямса Основы - Часть 3: Загрузка данных из файла XML, переведенного в v3 ». После нескольких часов тонкой настройки у меня все заработало, включая кластеризацию и пользовательские маркеры.
Я был очень счастливым кроликом и очень хотел показать его. Затем, к своему разочарованию, я обнаружил, что он не работает ни в IE, ни в Firefox (я тестировал его в Chrome).
Мне хорошо известно, что с API Карт Google работать нелегко, но есть ли какая-то причина, почему я должен использовать такое поведение в разных браузерах? Карту можно увидеть, перейдя по ссылке www.littlehotels.co.uk / new / и нажав «Поиск по карте». Код здесь:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Little Hotels of Spain - Google Map</title>
<meta name="description" content="Little Hotels provides maps showing the location of hotels, using Google Maps to create both a street/road map and a satellite image.">
<meta name="keywords" content="Little Hotels, Little Hotels of Spain, Spain, mainland spain, balearic, balearics, canary, canaries, small, hotel, hotels, map, google map, holiday, holidays">
<style type="text/css">
html { height: 100% }
body{ height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}
a:link, a:visited, a:hover {color: #FF6600; text-decoration: none; font-weight: bold;}
h1{font-size: 16px; color: #2B8CB9; font-weight: bold;}
#content{padding: 0 5px 0; width: 640px;}
#map_canvas { height: 100% }
.verdana{font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript" src="../js/downloadxml.js"></script>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// global "map" variable
var map = null;
var markerclusterer = null;
var image = new google.maps.MarkerImage('../images/hotel_icon.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
var shadow = new google.maps.MarkerImage('../images/hotel_shadow.png',
new google.maps.Size(51, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: image,
shadow: shadow
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
var lat = 0;
var lng = 0;
var zoomzoom = 0;
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0,pos).toLowerCase();
var value = pairs[i].substring(pos+1).toLowerCase();
if (argname == "lat") {lat = parseFloat(value);}
if (argname == "lng") {lng = parseFloat(value);}
if (argname == "zoom") {zoomzoom = parseInt(value);}
}
var thisLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
center: thisLatlng,
zoom: zoomzoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
downloadUrl("php-to-xml.php", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html=markers[i].getAttribute("html");
var hotel=markers[i].getAttribute("hotel");
var marker = createMarker(point,hotel,html);
}
var clusterStyles = [
{
opt_textColor: '#5a7aba',
url: '../images/cluster_icon.png',
height: 40,
width: 40
}
];
var mcOptions = {gridSize: 35, maxZoom: 8, styles: clusterStyles};
markerCluster = new MarkerClusterer(map, gmarkers,mcOptions);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(300,50)
});
//]]>
</script>
</head>
<body onload="initialize()">
<div id="content">
<h1>Little Hotels Map Search</h1>
<span class="verdana">Click on the icons for more information or use the Google controls to zoom, scroll, pan and change view.<br /><br /></span>
<table border=1 bordercolor="#666666">
<tr>
<td>
<div id="map_canvas" style="width: 640px; height: 450px"></div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>
Спасибо за любой совет, который может предложить каждый.