Google maps 谷歌地图在safari中不起作用(灰色矩形)

Google maps 谷歌地图在safari中不起作用(灰色矩形),google-maps,safari,cross-browser,Google Maps,Safari,Cross Browser,对不起,我的英语不好 我不知道为什么,但我网站上的谷歌地图API在safari浏览器中不起作用。。在其他浏览器(Firefox、Chrome、Opera)中,它可以正常工作。也许你知道我做错了什么?这是我的js代码: 地点.第三方物流: {include file="helpers/menu.tpl"} <div id="content"> <div id="my-map"> </div> </div> 哦,我找到了答案。我不知道为什么,

对不起,我的英语不好

我不知道为什么,但我网站上的谷歌地图API在safari浏览器中不起作用。。在其他浏览器(Firefox、Chrome、Opera)中,它可以正常工作。也许你知道我做错了什么?这是我的js代码:

地点.第三方物流:

{include file="helpers/menu.tpl"}
<div id="content">
    <div id="my-map"> </div>
</div>

哦,我找到了答案。我不知道为什么,但是Safari在“simbol…上给了我一个错误,所以我在locations.class.tpl中更改了所有的simbols by/”并且所有的东西现在都在工作。

我认为Safari上的JSON有问题,或者可能我错误地调用了Safari不支持的函数?谁都知道。网页:www.ledai.ae/locations
function init(locations, icon, id){
   var map = new google.maps.Map(document.getElementById(id),{
    zoom: 15,
    center: new google.maps.LatLng(25.204120, 55.274700),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {position: google.maps.ControlPosition.LEFT_BOTTOM}
  });
  var infowindow = new google.maps.InfoWindow({
    maxWidth: 170
  });
  var markers = new Array();
  for (var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icon
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      };
    })(marker, i));
  }
  autoCenter();
  function autoCenter() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++){bounds.extend(markers[i].position);}
    map.fitBounds(bounds);
  }
}
<script src="https://maps.googleapis.com/maps/api/js?language=en"> </script>
<script type="text/javascript" src="{$config.views_url}js/maps.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      var locations = {$locations};
      var icon = "{$config.views_url}images/icon2.png";    //icon.png
      //locations, icon, html id
      init(locations, icon, 'my-map');

    });
</script>
<?php

class locations extends controller {

    function locations() {
        parent::controller("locations");

        $this->fields = array(
            "created" => "created",
            "location" => "string",
            "coordx" => "string",
            "coordy" => "string",
            "descript" => "string",
        );

        //$this->createTableStructure();
    }

    function getLocations(){
        global $coreSQL;
        $location = $coreSQL->queryValue('SELECT CONCAT("[", GROUP_CONCAT(CONCAT("[`",descript,"`"), CONCAT(",`",coordx,"`"), CONCAT(",`",coordy), "`]"),"]") AS locations FROM locations');
        return $location;
    }
}

?>
#content{
        margin:0 auto;
    position:relative;
        width:1280px;
    height:1775px;
    background-image: url(../images/sand.png), url(../images/bg.png);
    background-repeat: no-repeat, no-repeat;
        background-position: 0 100%, 50% 50%;   
}

#my-map{
        border:10px solid white;
        width: 800px;
        height: 600px;
        background-color: #CCC;
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
      }