1
Ich habe Version 2 für einige Zeit verwendet und entschieden, dass es Zeit war, zu Version 3 als Teil eines größeren Website-Updates zu wechseln. Ich habe meinen gesamten Code auf "Mike Williams' tutorial The Basics - Part 3: Loading the data from an XML file translated to v3" basiert. Nach stundenlanger Feinabstimmung funktionierte alles, einschließlich Clustering und benutzerdefinierte Markierungen.Google Maps API V3-Markierungen werden nicht angezeigt
Ich war ein sehr fröhliches Hase und wollte es zeigen. Zu meiner Enttäuschung stellte ich fest, dass es weder in IE noch in Firefox funktionierte (ich hatte es in Chrome getestet).
Ich bin mir bewusst, dass Google Maps API nicht einfach ist, aber gibt es einen Grund, warum ich dieses Verhalten mit verschiedenen Browsern bekommen sollte? Die Karte kann unter www.littlehotels.co.uk/new/ angezeigt werden und klicken Sie auf "Kartensuche". Der Code ist hier:
<!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>
Danke für jeden Rat, den jeder anbieten kann.
Ich war Homing auf die gleiche Art von Sache. Ich fand ein paar Beispiele von - darin, die es aufgehalten haben. Ich hatte die "bis ich Ihren Beitrag gelesen habe aber nicht gefunden. Danke. Ich habe die gelöscht" und geändert - zu n nur um es zum Laufen zu bringen. Jetzt muss ich einfach herausfinden, wie ich sie in meiner php-zu-xml-Datei konvertieren kann, so dass sie zu einer dauerhaften und sauberen Lösung wird. Vielen Dank, dass Sie sich die Zeit genommen haben und Mühe haben, zu helfen. – TrapezeArtist
Es wäre hilfreich, das PHP-Skript zu sehen –