2014-03-26 110 views
1

我有一个网页显示带有2个自定义标记的地图。该网页一直运行良好直到今天。我猜测谷歌在API或类似的东西上做了一些更新。继承人的代码:地图停止显示 - Google MAP v3 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&[email protected]&MotDePasse=alloallo'"/> 

<br/><span style="cursor:pointer;font-size:12px;" onClick="document.location = 'add_hd.aspx?Annee=2014&Mois=4&Jour=9&Seq=1010&[email protected]&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' 产生,

有趣的部分是它没有改变近期的工作,这意味着它必须有一些关于不再容忍的更新或代码。

+0

当我删除头部副本(并将其更改为发布版本,v = 3)时,您将包含API两次,本地版本可以工作。 – geocodezip

+0

对不起,我没有早点回来。这是问题。谢谢。 – user3462096

回答

0

这实际上是工作.. http://jsfiddle.net/baL75/1/ 我不得不做出一些改变:

上的标记图像URL

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

也初始化的情况下。

initialize = function() { 

但是,这是所有..没有API的变化,会让你的代码无法正常工作。

+0

对我来说API的双重包括是问题,并且它最近才停止工作。意思谷歌可能确实做了一个变化,防止我这一个愚蠢的举动;) 谢谢Enapupe! – user3462096