Safari 5.1.7中未显示Google Map

Question

Here is my Link which shows the Map perfectly in Chrome, IE and Fire-fox but the map is not shown in Safari version 5.1.7. Can any one help me out to resolve this issue.

My JavaScript for google Map

<script>
    function writeAddressName(latLng) {

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "location": latLng },
        function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
            }
            else
                document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
        });
    }

    function geolocationSuccess(position) {
        var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        document.cookie = "latitude=" + position.coords.latitude;
        document.cookie = "longitude=" + position.coords.longitude;
        // Write the formatted address
        writeAddressName(userLatLng);


        var myOptions = {
            zoom: 16,
            center: userLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };


        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        // Place the marker
        new google.maps.Marker({
            map: mapObject,
            position: userLatLng
        });
        // Draw a circle around the user position to have an idea of the current localization accuracy
        var circle = new google.maps.Circle({
            center: userLatLng,
            //radius: position.coords.accuracy,
            map: mapObject,
            //fillColor: '#0000FF',
            fillOpacity: 0.5,
            //strokeColor: '#0000FF',
            strokeOpacity: 1.0
        });
        mapObject.fitBounds(circle.getBounds());
    }

    function geolocationError(positionError) {
        document.getElementById("error").innerHTML + positionError.message + "<br />";
    }

    function geolocateUser() {
        // If the browser supports the Geolocation API
        if (navigator.geolocation) {
            var positionOptions = {
                enableHighAccuracy: true,
                timeout: 10 * 1000 // 10 seconds
            };
            navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
        }
        else
            document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
    }

    window.onload = geolocateUser;
</script>

Thank you.

Answer 1

Your map will only be drawn when geolocation is successfull, but at least for me it fails in Safari.

Instead of creating the map in geolocationSuccess create the map initially with a default-center and when geolocation was successfull update the center of the map.

 function geolocateUser() { //draw the map: var myOptions = { zoom: 1, center: { lat: 0, lng: 0 }, //default center at start mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; // Draw the map var mapObject = new google.maps.Map(document.getElementById("map"), myOptions); // Place the marker mapObject.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('error')); function writeAddressName(latLng) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "location": latLng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { document.getElementById("error") .innerHTML = results[0].formatted_address; } else document.getElementById("error") .innerHTML = "Unable to retrieve your address"; }); } function geolocationSuccess(position) { var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); new google.maps.Marker({ map: mapObject, position: userLatLng }); // Draw a circle around the user position to have an idea of the current localization accuracy var circle = new google.maps.Circle({ center: userLatLng, radius: position.coords.accuracy, map: mapObject, //fillColor: '#0000FF', fillOpacity: 0.5, //strokeColor: '#0000FF', strokeOpacity: 1.0 }); mapObject.fitBounds(circle.getBounds()); writeAddressName(userLatLng); } function geolocationError(positionError) { var e = { 1: 'PERMISSION_DENIED', 2: 'POSITION_UNAVAILABLE', 3: 'TIMEOUT' }; document.getElementById("error").innerHTML = 'error:' + e[positionError.code]; } // If the browser supports the Geolocation API if (navigator.geolocation) { var positionOptions = { enableHighAccuracy: true, timeout: 10 * 1000 // 10 seconds }; navigator.geolocation['getCurrent'+'Position'](geolocationSuccess, geolocationError, positionOptions); } else { document.getElementById("error").innerHTML = "Your browser doesn't support the Geolocation API"; } } window.onload = geolocateUser; 

 html, body, #map { height: 100%; margin: 0; padding: 0 } #error { background: #fff; padding: 6px; } 

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="error"></div> <div id="map"></div>