IE9で Google Maps API V3 が動作しません。 Chrome23、Firefox17、Safari5.17 は問題なく表示されます。 以下の処理は一通り試しましたが、ダメでした。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願い致します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>●▲■マップ</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://●●●/jGoogleBarV3.js"></script> <link rel="stylesheet" type="text/css" href="●●●/default.css" media="all" /> <script type="text/javascript"> var rendererOptions = {draggable: true}; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map; var aqui = new google.maps.LatLng(経度, 緯度); function initialize() { var myOptions = {zoom: 16, disableDefaultUI: true, /* 一旦全てのUIを無効化 */ zoomControl: true, zoomControlOptions: { style:google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.RIGHT_TOP }, /* ★スケールコントロールを有効化 */ scaleControl: true, /* ★スケールコントロールの表示位置 */ scaleControlOptions: { position: google.maps.ControlPosition.LEFT_TOP },center: aqui, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var layer = new google.maps.FusionTablesLayer({ query: {select: 'Geocodable address', from: '●●●●●'},}); layer.setMap(map); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); google.maps.event.addListener(directionsDisplay, "directions_changed", function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); } function calcRoute(fromAddress, toAddress) { var selectedMode = document.getElementById("mode").value; var fromAddress = document.getElementById("fromAddress").value; var toAddress = document.getElementById("toAddress").value; var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]}; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000. document.getElementById("total").innerHTML = total + " km"; } </script> </head> <body onload="initialize()"> <div id="wrapper"> <div style="margin-bottom: -10px;"> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">車</option> </select> <select id="fromAddress" onchange="calcRoute();"> <option value="経度, 緯度">■■■</option> </select> <form action="#" onsubmit="calcRoute(fromAddress.value, this.toAddress.value); return false"> <font size="3"color="#ff0000">▲▲▲</font> ⇒<input type="text" size="20" id="toAddress" name="to" value="" /> </form> </div> <div id="map_canvas" style="float:left; width:100%; height:100%;"></div> <div style="margin-top: 12px;"> </body> </html>
↧