API Карт Google и Internet Explorer 8/9 - PullRequest
Новая
       19

API Карт Google и Internet Explorer 8/9

0 голосов
/ 18 июля 2011

По какой-то причине карта Google через API Javascript неправильно загружается в Internet Explorer.

Отображается в Google Chrome и Firefox абсолютно нормально. 

<!DOCTYPE html>
<html> 
    <head> 
        <title>Google Maps</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
        <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <style>
            #map_canvas {font: 12px Arial, Helvetica, sans-serif; color:#3B3B3B; height:400px; width: 700px;}
            .text {text-align:center; color:#3B3B3B;}
        </style>
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 
        <script type="text/javascript"> 
          var geocoder;
          var map;

          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 15,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }

          function codeAddress() {
            var address = '50 Bond Street, London';
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
              } else {
            //Not Found
              }
            });
          }
        </script> 
        <script type="text/javascript">
            initialize(); 
            codeAddress();
        </script>
    </head> 
    <body onload="initialize(); codeAddress();"> 
        <div id="map_canvas"></div> 
    </body> 
</html>

Странно, если я наложу на тело onmouseover и вызову функции, похоже, он снова начнет работать? Но это, очевидно, перезагружает карты каждый раз!

1 Ответ

0 голосов
/ 18 июля 2011

Я вижу, что вы вызываете свои функции из события onload тела. Может быть, сценарии не загружаются должным образом в то время?

Попробуйте загрузить API таким образом. Вы можете загрузить API асинхронно и указать функцию обратного вызова для инициализации содержимого. 

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D"></script> 
<script type="text/javascript"> 
  function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  google.setOnLoadCallback(initialize);
</script>

[править: предыдущее решение не сработало. Реальное решение - в комментариях, я просто выразился здесь]

...