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!
精彩评论