Google maps V3 maps ok in chrome, blank in mobile safari
This code works perfectly in Chrome, but is blank in mobile Safari. Tried to set my map
to fixed dimensions, didn't seem to help.
<div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
<div id="map" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
<script type="text/javascript">
function map_initialize() {
// when first loading the window make sure map_canvas & map are set to appropriate
// dimensions based on the iphone's orientation when loading the map
if ((window.orientation == 开发者_StackOverflow(-90)) || (window.orientation == (90))) {
var width = 520; var height = 285;
$('#map').css("width",width+"px");
$('#map').css("height",height+"px");
$('#map-overflow').css("width",(width-40)+"px");
$('#map-overflow').css("height",(height-10)+"px");
} else {
var width = 360; var height = 435;
$('#map').css("width",width+"px");
$('#map').css("height",height+"px");
$('#map-overflow').css("width",(width-40)+"px");
$('#map-overflow').css("height",(height-10)+"px");
}
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: point,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var memarker = new google.maps.Marker({position:point, map: map,icon: 'http://servername.co.nz/markers/man.png'});
var radius = 25;
var searchUrl = 'maptest.php?lat=' + point.lat() + '&lng=' + point.lng() + '&radius=' + radius;
jQuery.get(searchUrl, {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var name = marker.attr("name");
var address = marker.attr("address");
var distance = marker.attr("distance");
var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),parseFloat(marker.attr("lng")));
var marker = new google.maps.Marker({position: latlng, map: map,icon: 'http://servername.co.nz/markers/'+marker.attr("markerIcon")});
google.maps.event.addListener(marker, 'click', function () {
$('#locationInfo').empty();
$('#locationInfo').show();
$('#locationInfo').append("<p>Name:"+name+"</p>");
$('#locationInfo').append("<p>Address:"+address+"</p>");
$('#locationInfo').append("<p>Distance:"+distance+"</p>");
});
});
});
});
}
else {
alert('W3C Geolocation API is not available');
}
}
</script>
DUH! geolocation was turned off for safari! Nothing actually detected this!
精彩评论