0
Beim Ausführen des folgenden Codes in einem Browser gibt es keine Probleme. Wenn man durch Phonegap läuft, kommt alles gut außer der Karte. Ich sehe alles arbeiten außer die Karte ist grau und hat den Text "Entschuldigung, wir haben keine Bilder hier."Phonegap - iOS - Google Maps "Leider keine Bilder hier"
Der Zoom ist auf 4 eingestellt, damit sehe ich kein Problem damit. Ich habe die config.xml von phonegap auch eingeschlossen. Die folgenden Whitelists URLs und erlauben Zugang Herkunft zu google in der iOS-Plattform.
Jede Hilfe wird sehr geschätzt!
<preference name="OpenAllWhitelistURLsInWebView" value="true" />
<platform name="ios">
<access origin="*.google.*" />
<access origin="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<!DOCTYPE html>
<head>
<link rel="icon" href="brew-marker.png" >
<title>BrewsLocal - Find More Local Breweries</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUIshgyijJP94STQUaMirmDj5eAVx-BuA&callback=initMap" async defer></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Brewery: {
icon: 'brew-marker.png',
anchor: new google.maps.Point(30,0),
scale: 1
},
Brewpub: {
icon: 'pub-marker.png',
anchor: new google.maps.Point(30,0),
scale: 1
}
};
var gmarkers1 = [];
function initialize() {
\t \t
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
});
} else {
alert("Browser Says No");
}
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.541458, -77.446578),
zoom: 4,
mapTypeId: 'roadmap',
disableDefaultUI: true,
gestureHandling: 'greedy'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("http://brewslocal.com/phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var id = markers[i].getAttribute("id");
var address = markers[i].getAttribute("address");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var mon = markers[i].getAttribute("monday");
var tue = markers[i].getAttribute("tuesday");
var wed = markers[i].getAttribute("wednesday");
var thur = markers[i].getAttribute("thursday");
var fri = markers[i].getAttribute("friday");
var sat = markers[i].getAttribute("saturday");
var sun = markers[i].getAttribute("sunday");
var facebook = markers[i].getAttribute("facebook");
var twitter = markers[i].getAttribute("twitter");
var instagram = markers[i].getAttribute("instagram");
var website = markers[i].getAttribute("website");
var type = markers[i].getAttribute("type");
var logo = markers[i].getAttribute("logo");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var day;
switch (new Date().getDay()) {
case 0:
day = markers[i].getAttribute("sunday");
break;
case 1:
day = markers[i].getAttribute("monday");
break;
case 2:
day = markers[i].getAttribute("tuesday");
break;
case 3:
day = markers[i].getAttribute("wednesday");
break;
case 4:
day = markers[i].getAttribute("thursday");
break;
case 5:
day = markers[i].getAttribute("friday");
break;
case 6:
day = markers[i].getAttribute("saturday");
}
if(day != "closed") {
openStatus = "Open: ";
}
else {
openStatus = "Closed Today";
day = "";
}
var html = "<div class='infoblock'><div class='smallblock'><img src='" + logo + "'/></div><div class='largeblock'><h2>" + name + "</h2><h3><strong>" + openStatus + "</strong>" + day + "</h3><a href='http://www.google.com/maps/?q=" + point
+ "' target='_blank' '>" + address + "</a></div><div class='socialblock'><a class='socialicon' target='_blank' href='" + facebook + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/facebook-96.png'/></a><a class='socialicon' target='_blank' href='" + twitter + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/twitter-96.png'/></a><a class='socialicon' target='_blank' href='" + instagram + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/instagram-96.png'/></a><a class='socialicon' target='_blank' href='" + website + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Network/domain-96.png' /></a></div></div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
type: type,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0),
shadow: icon.shadow
});
gmarkers1.push(markers);
filterMarkers = function (type) {
for (i = 0; i < markers.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.type == type || type.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map,marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('http://brewslocal.com/phpsqlajax_genxml.php') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="initialize()">
<div class="menu-icon">
<img src="menu-button.png" title="Menu" width="100">
</div>
<div class="close-icon">
<img src="close-button.png" title="Multiply" width="100">
</div>
<div class="filter-icon">
<img src="search-button.png" title="Search" width="96">
</div>
<div class="main-menu">
<div class="logo-main-menu">
<img src="main-logo.png"/>
</div>
<ul class="nav-menu-main">
<li><a href="" class="menu-button">
Search A Location</a>
</li>
<li><a href="" class="menu-button">
View Breweries</a>
</li>
<li class="menu-button push-second">
Map Legend <span class="glyphicon glyphicon-chevron-down" style="height: 100px; width: 100px; color: #fff;"></span>
<ul class="second-menu">
<li><a href="" class="menu-button">
<img src="brew-marker.png"/>Brewery</a>
</li>
<li><a href="" class="menu-button">
<img src="pub-marker.png" />Brewpub</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="overlay-background">
</div>
<div class="search-box">
<input type="text" placeholder="Enter A Location" /><div class="search-image"><a href=""><img src="/near-button.png" title="Near Me" width="96"></a></div>
</div>
<div id="map"></div>
<div class="show-brewery">
<div class="brewery-logo" id="breweryimage">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".menu-icon").click(function(){
$("#map").animate({"left": "60%"},700);
$(".main-menu").animate({"display": "block"},700);
$(".menu-icon").animate({"left": "60%","top": "-200px"},700);
$(".close-icon").animate({"top": "25px"},700);
$(".filter-icon").animate({"right": "-135px"},700);
});
});
$(document).ready(function(){
$(".close-icon").click(function(){
$("#map").animate({"left": "0px"},700);
$(".main-menu").animate({"display": "none"},700);
$(".menu-icon").animate({"left": "15px","top": "25px"},700);
$(".close-icon").animate({"top": "-200px"},700);
$(".filter-icon").animate({"right": "15px"},700);
});
});
$(document).ready(function(){
$(".push-second").click(function(){
$(".second-menu").slideToggle();
});
});
$(document).ready(function(){
$(".overlay-background").click(function(){
$(".search-box").animate({"top": "-200px"},500);
$(".overlay-background").delay(200).slideToggle();
});
});
$(document).ready(function(){
$(".filter-icon").click(function(){
$(".overlay-background").slideToggle(500);
$(".search-box").delay(100).animate({"top": "50%"},500);
});
});
</script>
</body>
</html><?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.simpleApp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Simple App</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="OpenAllWhitelistURLsInWebView" value="true" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/[email protected]" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/[email protected]" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/[email protected]" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/[email protected]" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/[email protected]" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/[email protected]" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/[email protected]" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/[email protected]" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/[email protected]" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<access origin="*" />
<platform name="android">
<access origin="*" />
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<access origin="*.google.*" />
<access origin="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<access origin="*" />
</widget>