Hallo Community,
ich habe ein Google-Maps-Api-Problem auf meinem iPad.
Modell: MC773FD/A
iOS-Version: 8.1.2 (12B440)
Die folgende HTML-Datei enthält 2 sections - eine davon sichtbar, eine unsichtbar. Über die Google-Maps-Api werden nun die Geo-Koordinaten von verschiedenen Adressen geholt. Auf einer Karte (die sich in der ersten der beiden sections befindet) wird dann an jeder Position ein Marker erstellt. Mit einem Klick auf den Marker passiert folgendes:
- Die Karte wird gelöscht (komplett aus dem DOM)
- Es wird ein neues Karten-Element erstellt
- Das neue Karten-Element wird in die andere section eingefügt
- Die alte section wird unsichtbar, die neue section sichtbar
- Die Karte wird neu initialisiert
Kurz gesagt, ich ziehe die Map von einer section in die andere und lass sie neu rendern.
Das funktioniert alles gut soweit. Wenn ich allerdings schnell hintereinander auf die Marker klicke, bekomme ich von der Google-Api ganz normal ein "OVER_QUERY_LIMIT"-Error. Dieser wird abgefangen und als alert ausgegeben. Im normalen Browser wird danach die Karte neu geladen und alle Marker angezeigt, die vor den Query-Limit noch abgearbeitet wurden.
Starte ich die Anwendung allerdings als Web-App in einer Sandbox, stürzt sie nach der alert-Ausgabe komplett ab.
Kann mir jemand erklären wieso das passiert?
Gruß
Daniel
ich habe ein Google-Maps-Api-Problem auf meinem iPad.
Modell: MC773FD/A
iOS-Version: 8.1.2 (12B440)
Die folgende HTML-Datei enthält 2 sections - eine davon sichtbar, eine unsichtbar. Über die Google-Maps-Api werden nun die Geo-Koordinaten von verschiedenen Adressen geholt. Auf einer Karte (die sich in der ersten der beiden sections befindet) wird dann an jeder Position ein Marker erstellt. Mit einem Klick auf den Marker passiert folgendes:
- Die Karte wird gelöscht (komplett aus dem DOM)
- Es wird ein neues Karten-Element erstellt
- Das neue Karten-Element wird in die andere section eingefügt
- Die alte section wird unsichtbar, die neue section sichtbar
- Die Karte wird neu initialisiert
Kurz gesagt, ich ziehe die Map von einer section in die andere und lass sie neu rendern.
Das funktioniert alles gut soweit. Wenn ich allerdings schnell hintereinander auf die Marker klicke, bekomme ich von der Google-Api ganz normal ein "OVER_QUERY_LIMIT"-Error. Dieser wird abgefangen und als alert ausgegeben. Im normalen Browser wird danach die Karte neu geladen und alle Marker angezeigt, die vor den Query-Limit noch abgearbeitet wurden.
Starte ich die Anwendung allerdings als Web-App in einer Sandbox, stürzt sie nach der alert-Ausgabe komplett ab.
Kann mir jemand erklären wieso das passiert?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="false" http-equiv="imagetoolbar" />
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=3.0" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geocoding service</title>
<style>
html, body, #map-canvas, .full-screen {
height: 100%;
margin: 0px;
padding: 0px
}
.panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
var addresses = ["Berlin", "Potsdam", "Bernau", "Schöneiche", "Strausberg", "Erkner"];
var bounds = new google.maps.LatLngBounds();
var activeSection = 0;
var activeElement;
var inactiveElement;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var a in addresses) {
codeAddress(addresses[a]);
}
}
function geocodeCallback() {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon : "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
map: map,
position : results[0].geometry.location
});
bounds.extend(results[0].geometry.location);
google.maps.event.addListenerOnce(marker, 'click', (function() {
switchSection();
}));
map.fitBounds(bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
}
}
function codeAddress(address) {
geocoder.geocode( {'address': address}, geocodeCallback());
}
function switchSection() {
document.getElementById("map-canvas").remove();
if (activeSection == 0) {
activeElement = document.getElementById("map");
inactiveElement = document.getElementById("home");
activeSection = 1;
} else {
activeElement = document.getElementById("home");
inactiveElement = document.getElementById("map");
activeSection = 0;
}
var mapCanvas = document.createElement("div");
mapCanvas.setAttribute("id", "map-canvas");
activeElement.appendChild(mapCanvas);
inactiveElement.style.display = "none";
activeElement.style.display = "block";
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<section class="full-screen" id="home" data-role="page">
<div id="map-canvas"></div>
</section>
<section class="full-screen" id="map" data-role="page" style="display: none">
</section>
</body>
</html>Gruß
Daniel