- ベストアンサー
Google maps API V3 ルート案内の手直し方法
- 出発地ポイントの表示を変更する方法
- 目的地の住所入力で案内を表示する方法
- 2点間の距離を測定する方法
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
- wf9a5m75
- ベストアンサー率92% (13/14)
ちょっとコードを書いている暇がないので、サンプルのリンクだけ案内します。 https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete
お礼
ご回答ありがとうございます。 早速IEの開発者ツールでhtmlをコピーして再現してみました。 しかし、最上部の選択ボックスは表示されるのですが、地図が出てこず真っ白なままです。 何がいけないのでしょうか？ https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple
関連するQ&A
- Google AJAX API のmapsのロードとＩＥでの表示について
いつもお世話になっています。 Google AJAX APIについて質問です。 デベッロッパーガイドに従って以下のようにスクリプトを書いたのですが IEのみエラーが出て表示されません。 (IE7でも表示はされましたが、不安定でした） <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=登録したAPIキー"></script> <script type="text/javascript"> google.load("maps", "2"); function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="map" style="width: 400px; height: 400px"></div> <div id="searchcontrol"></div> </body> </html> なぜIEだけが表示されないのか、エラーが出るのかわかる方いらっしゃいましたらよろしくお願いします。
- 締切済み
- JavaScript
- google maps APIのジオコーディング
google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、２箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか？ //HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ジオコーディング</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> </head> <body onload="initialize()"> <div> 地点１<input id="start" type="textbox" size="50"><br> 地点２<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点１ <div id="geocoder_info" style="height:10%"></div> 地点２ <div id="geocoder_info2" style="height:10%"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="geocode.js"></script> </body> </html> //javascript geocode.js var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.699338,139.705146); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($("#map_canvas").get(0), myOptions); } function codeAddress() { var address = document.getElementById("start").value; var info = document.getElementById("geocoder_info"); geocoder.geocode( {'address': address},function(results, status) { info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location; if (status == google.maps.GeocoderStatus.OK) { Slat = results[0].geometry.location.lat(); Slng = results[0].geometry.location.lng(); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); var address2 = document.getElementById("goal").value; var info2 = document.getElementById("geocoder_info2"); geocoder.geocode( { 'address': address2},function(results2, status2) { info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location; if (status2 == google.maps.GeocoderStatus.OK) { Glat = results2[0].geometry.location.lat(); Glng = results2[0].geometry.location.lng(); var marker2 = new google.maps.Marker({ map: map, position: results2[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2; lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2; map.setCenter(latCenter,lngCenter); }
- ベストアンサー
- JavaScript
- google maps api ルート線変更
Google Maps JavaScript API v3 でルート検索で表示されるポリラインの色や太さを変更したいのですが行き詰ってます。 ネットで調べてますと、polylineOptionのstrokeColorやstrokeWeightなどで変更できるような事は書いてあるのですが、どうやってもうまくいきません。 Googleデベロッパーで紹介されています下記のルートサービスのひな形をもとにいろいろやっているのですが、どこにどのように記述すればいいのでしょうか。 ------------------------------------------------ var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } --------------------------------------------------
- ベストアンサー
- JavaScript
- 非常に困ってます。Google mapsの作成
およびスタイルシートの活用 メモ帳にて 以下のソースコードにて試したのですがIEで右側しか表示されないで困ってます。多少いじってます。 このソースコードでmapを表示できるよう指摘をお願いします。 とても長いですが自力ではもう分からなくて手つかずです。 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>１マップ</title> <style type="text/css"> <!-- h2 { text-align:left; font-size:25px } p { margin-top:0px; text-align:justify; text-justify:distribute; line-height:15pt; font-size:16px; color:black } .text1div { border-style:solid; border-width:4px; border-color:#ffffff; padding:3px; width:330px; height:325px; border:solid 0px; overflow:auto; background-color:white darkblue darkblue white; scrollbar-base-color: #ffffff; scrollbar-highlight-color:#009999; position:absolute; left:410px; top:70px } P.text1 { text-align:justify; text-justify:distribute; line-height:120%; font-size:15px } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr ipt> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(座標); var opts = { zoom: 13, center: latlng, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var marker = new google.maps.Marker({position: latlng,map: map }); var infowindow = new google.maps.InfoWindow({content:'＊＊＊＊＊',position: latlng }); infowindow.open(map); </script> </head> <body onload="initialize()"> <h2>My Maps</h2> <div id="map_canvas" style="width:400px; height:300px"></div> <DIV CLASS="text1div"><P CLASS="text1"> マップです。<BR> ＊＊市＊＊区＊条＊＊丁目＊番＊号<BR> Tel ＊＊＊-＊＊＊-＊＊＊<BR><BR> <DIV> <DIV align="center"> <form><input type="button" name="OK" value=" Close " onClick="window.close()"></form> </DIV> </body> </html>
- 締切済み
- CSS
- google map api プログラミング
javascript google map api どなたか助けてください マップを作成しているのですが、どうしてもわからないところがあります。 下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときの マーカーの場所の詳細を表示させたいのですがどうやっても表示できません。 どなたかプログラミングにお詳しい方教えてください！ よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8n"/> <title>練習</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false®ion=jp"></script> <script language="JavaScript" src="gcode_com.js"></script> <script language="JavaScript" src="gcode.js"></script> <script language="JavaScript" src="GoogleMapsCustomMapType.js"></script> <!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript"> <!-- var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(36.370324,138.65968); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, scaleControl: true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; // var zm = document.getElementById("zm").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // document.write( alert ( zoom ) ); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } // --> </script> </head> <body onload="initialize()" background=""> <center> <font size=5>練習</font> <div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div> </center> <div> キーワード: <input id="address" type="textbox" size="30" value="ここにキーワードを入力してください"> <!input id="zm" type="textbox" size=2 value="8n"> <input type="button" value="検索" onclick="codeAddress()"> </div> <table width="400" height="200" border="1" align="left"> <tr> <td width="150" height="50">緯度</td> <td width="150" height="50">経度</td> <td width="800" height="50">住所</td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> </table> </body> </html>
- 締切済み
- JavaScript
- Google maps api v3
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
- ベストアンサー
- JavaScript
- Google maps API V3 検索ボックス
Google maps API V3 で、kmlファイルを利用した地図（http://itohiki119.iinaa.net/bousai/test.html） を作成しました。 この地図に検索ボックスを追記したいのですが、上手くいきません。 お知恵をお貸し下さい。m(_ _)m 一応、http://code.google.com/p/gmaps-api-v3-googlebar/downloads/list からダウンロード (1) gmaps-api-v3-googlebarから入手したファイルを解凍。 (2) その中のjGoogleBarV3.jsとdefault.cssを適当な位置に配置。 (3) scriptとlinkを追加。 してみたのですが、ダメでした。 もともとの、htmlは、下記の通りです。 _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ <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"> function initialize() { var initPos = new google.maps.LatLng(34.794267, 134.717400); var myOptions = { zoom : 15, center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlOptions = {preserveViewport: true} var ctaLayer = new google.maps.KmlLayer('http://itohiki119.iinaa.net/bousai/test.kml', kmlOptions); ctaLayer.setMap(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"><br /></div> </body> </html> _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ よろしくお願い致します。
- ベストアンサー
- JavaScript
- Google maps API のマーカーを増やす
お恥ずかしながらJavascriptが全く分からない者です。 しかし、必要が生じ、いじっていますが、 下記のソースで、マーカーの個数を増やす場合、 何処のソースをどのように増やせばいいのでしょうか？ また、その他やり方がありましたら、 ご教授いただければと思い、 質問させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">? <html xmlns="?http://www.w3.org/1999/xhtml">? <head> <title>テスト</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="?http://maps.google.com/maps?file=api&v=2&key=?＊＊＊＊" type="text/javascript"></script> </head> <body> <h1>テスト</h1> <div id="map" style="width: 500px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); var point = new GLatLng(35.852766, 139.794382); map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { overlay.openInfoWindow( document.createTextNode("テスト")); } }); } //]]> </script> </body> </html>
- ベストアンサー
- HTML
- Google Maps APIについて質問です
こんにちは。 現在大学の研究の一環で、Google Maps APIについて学習しております。 APIに関して全くの初心者ですが、質問があります。 今回必要としている機能として、羊ケ丘展望台から札幌駅へ向かう２ルートを地図上に表示させたいのですが 下記に示すようなものが現在できております。 ですが、まだ一つのルートしか表示できません。 このルートをそのままに、同じ出発地と到着地で（43.034047,141.359536）を経由するルートを赤いラインで追加したいと思っているのですが、 この場合はどういったコードになるのでしょうか？ かなりいろいろ調べてみましたが、初心者ゆえなかなか上手くできません。 どなたか知識をお持ちの方がいらっしゃいましたら、ご助力頂きたく存じます。 何卒宜しくお願い致します。 <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <style type="text/css"> v\:* {behavior:url(#default#VML);} html, body {width: 100%; height: 100%} body {top:0px;left:0px;margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px} </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> google.maps.event.addDomListener(window, 'load', function() { var mapObj; var lng = 139.8131925612688; var lat = 35.73369469149347; var mapOptions = { zoom: 11, center: null, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); // ルートを表示するマップを設定 var directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(mapObj); // 開始地点と終了地点、ルーティングの種類の設定 var request = { origin: "羊ケ丘展望台", destination: "札幌駅", travelMode: google.maps.DirectionsTravelMode.DRIVING }; // ルート検索を行う var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } }); // Monitor the window resize event and let the map know when it occurs if (window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()} ); } else { window.addEventListener("resize", function() {this.map.onResize()} , false); } }); </script> </head> <body> <div id="gmap" style="top:0px;left:0px;width: 100%; height: 100%;"> </div> </body> </html>
- 締切済み
- JavaScript
- Google Mapsがテーブルタグの中で使えません(IEのみ)
IE6、IE7でGoogle Mapsから取得した地図データをテーブルタグの中で表示しようとすると、地図がグレーになり表示することができません。 同じコードでもFirefox2は正常に表示できます。 表示場所(下記のコードの<div id="map">)をテーブルタグの外に移すとIEでも正常に地図を表示できています。 何かお分かりになる方がいらっしゃいましたら、アドバイスをお願いできないでしょうか。 コードは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps Example</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <div id="map" style="width:350px; height:300px;"></div> <script src="http://maps.google.com/maps?file=api&v=2&key=[キー値]" type="text/javascript" charset="utf-8"></script> <table style="width: 600px;"> <tr> <td> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng('new york', function(point) {map.setCenter(point, 13);}); //]]> </script> </td> </tr> </table> </body> </html> OSはWindowsXP(SP2)です。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- PC FAXの使用型番はFMC-J980DN-B/Wです。
- 通常はプリンターをFAXに切り替えて文章を印刷し、電話帳や送信先の選択画面が表示されますが、最近は画面がすぐに消えてしまい、送信ができません。
- 何度も試しても同じ状態で、現在はPC FAXが使用できません。
お礼
wf9a5m75 さん ありがとうございます。 イメージ通りのものが出来そうです。＼(^o^)／ 感謝感謝です。m(_ _)m