地图停止显示 - Google MAP v3 API

时间:2014-03-26 00:23:35

标签: javascript google-maps-api-3

我有一个显示带有2个自定义标记的地图的网页。该页面工作正常,直到今天。我猜谷歌在API或类似的东西上做了一些更新。继承人代码:

<head>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<style>
body { padding:0; margin:0; }

table#details td
{
    text-align:center;
        font-size:18px;
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #85c7d7 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #85c7d7 100%);
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #85c7d7 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #85c7d7));
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #85c7d7 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #85c7d7 100%);
    background-color:#FFF;
        border-radius:15px;
-moz-border-radius:15px; /* Old Firefox */
}
table#details
{
    background-image:url(images/backtable.jpg);
    background-image:();
        width:680px;
}

body {
    font-family: Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

input
{
    border:solid 1px black;
    padding:10px;
    margin:5px;
}
select
{
    border:solid 1px black;
    padding:10px;
    margin:5px;
}
#map-canvas {
        height: 200px;
        width: 300px;
        margin:20px;
        float:left;
      }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

</head>
<body>


        <table id="details">
            <tr>
            <td>
            <div id="map-canvas1" style="margin:15px;width:300px; height:220px; float:left;"></div>
            </td><td width=380>
            <h3 style="color:#F00;">Une clinique a besoin de vous!</h3>
            <img src="images/intercom.png" style="margin-top:-15px;"><br/>

        de <b>8h</b> &agrave; <b>18h</b><br/><span style="text-transform:uppercase">Clinique Du ruisseau de la bonne etoile <br/>4885 Henri-Bourassa  ville Montreal<br/>
</span>
<img src="images/accepteoffre.png" style="cursor:pointer;padding-top:10px;" onClick="document.location= 'insertwishdispo.aspx?Seq=3087&Midi=1&Tel=5146298488&HeureDebut=8&HeureFin=18&SeqH=1010&SeqC=7&Jour=9&Annee=2014&Mois=4&Courriel=thomasdc7@hotmail.com&MotDePasse=alloallo'"/>

<br/><span style="cursor:pointer;font-size:12px;" onClick="document.location = 'add_hd.aspx?Annee=2014&Mois=4&Jour=9&Seq=1010&Courriel=thomasdc7@hotmail.com&MotDePasse=alloallo';"><u>Je d&eacute;cline mais je veux cr&eacute;er une autre disponibilit&eacute;</u></span>
</td>
</tr>
</table>

 <script>

function initialize() {




 var Center=new google.maps.LatLng(18.210885,-67.140884);
    var directionsDisplay1;
    var directionsService1 = new google.maps.DirectionsService();
    var properties1 = {
    suppressMarkers: true
};


  directionsDisplay1 = new google.maps.DirectionsRenderer(properties1);


  //latLng = new google.maps.LatLng(45.522699, -73.7068679)
  latLng = new google.maps.LatLng(45.522699, -73.7068679)
  var mapOptions1 = {
    zoom: 14,
    mapTypeControl: false,
      scaleControl: false,
      zoomControl: false,
      streetViewControl: false,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };

  var map1;
  map1 = new google.maps.Map(document.getElementById('map-canvas1'),
      mapOptions1);
    directionsDisplay1.setMap(map1);
    var marker1 = new google.maps.Marker({
      position: latLng,
      title:"Clinique",
      visible: true,
      icon: 'images/toothmap.png'
  });

    latLng = new google.maps.LatLng(45.5196215, -73.7337152)

    var markerMe1 = new google.maps.Marker({
      position: latLng,
      title:"Moi",
      visible: true,
      icon: 'images/avatars_map.png'
  });
  marker1.setMap(map1);
  markerMe1.setMap(map1);


var start1 = new google.maps.LatLng(45.522699, -73.7068679)
var end1 =  new google.maps.LatLng(45.5196215, -73.7337152)
var request1 = {
origin:start1,
destination:end1,
travelMode: google.maps.TravelMode.DRIVING
 };

 directionsService1.route(request1, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay1.setDirections(result);
}
});





}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}
loadScript();

</script>

</body>

使用aspx循环生成页面,这就是为什么对象被命名为objectname'1',

有趣的是,它最近没有任何变化,这意味着它必须是一个不再容忍的更新或代码。

1 个答案:

答案 0 :(得分:0)

这实际上正在运作.. http://jsfiddle.net/baL75/1/ 我不得不做一些改变:

标记图片网址

上的

icon: 'http://lorempixel.com/40/20/'

也在初始化的背景下。

initialize = function() {

但这就是全部..没有API更改会导致您的代码无效。