wf9a5m75のプロフィール

@wf9a5m75 wf9a5m75
ありがとう数13
質問数1
回答数24
ベストアンサー数
13
ベストアンサー率
92%
お礼率
0%

Google Maps 活用講座というサイトを公開しています。 よろしかったら遊びに来てくださいませ。 ■Google Maps 活用講座 http://googlemaps.googlermania.com

  • 登録日2008/01/25
  • サイドバー付きGoogle Mapについて

    初めまして～ Google maps api　v3　初心者です。 どうかよろしくお願いいたします。 How to本でも紹介されているソースを元に サイドバー付き地図を作っています。 サイドバーをclickからmouseoverに変更し mouseoverで情報ウィンドウを表示し clickで、リンクに飛ばそうとしています。 が、サイドバーの<li>を作る過程で リンク先のURLを読み込むことができません。 手でリストを作っておいて、 clickでリンクへ飛んで mouseover時に情報ウィンドウ表示でも構いません。 どなたかお力添えをお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { background-color: #ffffff; font-size: 11px; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック ", Arial, sans-serif; text-align: left; } #myInfo img{ width:200px;height:160px;border:none; } #myInfo span{ font-size:16px;font-weight:bold; } #myInfo a{ font-size:12px; } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var stationList = [ {"latlng":[43.40559401552279,141.4347595785141],name:"厚田公園",myStr:"http://www.hokudai.ac.jp/",myImg:""}, {"latlng":[43.40450276438633,141.43127270679474],name:"厚田公園キャンプ場"}, ] var infoWnd, mapCanvas; function initialize() { var mapDiv = document.getElementById("map_canvas"); mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); infoWnd = new google.maps.InfoWindow(); //■地図上にマーカーを配置していく var bounds = new google.maps.LatLngBounds(); var station, i, latlng; for (i in stationList) { //■マーカーを作成 station = stationList[i]; latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]); bounds.extend(latlng); var marker = createMarker( mapCanvas, latlng, station.name,station.myStr,station.myImg ); //■サイドバーのボタンを作成 createMarkerButton(marker); } //■マーカーが全て収まるように地図の中心とズームを調整して表示 mapCanvas.fitBounds(bounds); } function createMarker(map, latlng, title,myStr,myImg) { //■マーカーを作成 var marker = new google.maps.Marker({ position : latlng, map : map, title : title, 　　content:myStr, content:myImg }); //■マーカーがクリックされたら、情報ウィンドウを表示 google.maps.event.addListener(marker, "click", function(){ infoWnd.setContent('<div id="myInfo"><span>' + title + "</span><br><a href="+myStr+ ">"+"<img src="+myImg+"><br>"+"詳細を開く</a>"+ "</title></div>"); infoWnd.open(map, marker); }); return marker; } function createMarkerButton(marker) { //■サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //■サイドバーがクリックされたら、マーカーを擬似クリック ★clickをmouseoverに改変 google.maps.event.addDomListener(li, "mouseover", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); </script> <style type="text/css"> <!-- #map_canvas { width: 75%; height: 500px; float: left; } ul#marker_list { padding:0; margin: 0; width: 23%; height: 500px; float: right; } ul#marker_list li { list-style: none; border: 1px solid #ccc; cursor: pointer; background-color: #eeeeee; } --> </style> </head> <body> <DIV align="center"> <TABLE> <TR> <TD width="600" valign="top"> <DIV id="map_canvas" style="width:600px; height:400px;float: left" align="left"></DIV> </TD> <TD width="250" valign="top" align="left"> <ul id="marker_list" style="width:250px;float: right; font-size:13px;"></ul> </TD> </TR> </TABLE> </DIV> </body> </html>

  • 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> _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ よろしくお願い致します。

    • ベストアンサー
    • noname#245585
    • JavaScript
    • 回答数1
  • グーグルマップAPI＋MySQLを使用する際の方法

    MySQLに登録してある位置情報を元にGoogleマップに対してマーカーを表示させると言う事を行いたいと思っています。 表示させること自体は（ https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja ）等を参考にPHPを介してXMLを出力し、それを使って行うことが出来ました。 ここから先の事について皆様のお知恵をお借りしたく思います。よろしくお願いします。 表示させたいマーカーが日本全国に現在数万件、今後20万件程度まで増えると予想しています。 全て一度に表示させる事は重さの面からも不可能でした。 一度に表示するマーカー数を500～1000程度に抑えることが現実的かと思うのですが、その数では日本全国と言う事もあり情報としてあまり意味が無い状態になってしまいます。 画面移動、ズームが発生した際に画面領域内のマーカーのみをその都度PHPを使ってMySQLから検索、表示とも思ったのですが、これではサーバーの負担が大きすぎる様に思います。 これを解決出来る様な方法・アイデアがございましたら、皆様に教えて頂きたく思います。 どうかよろしくお願いいたします。

  • google maps apiについて

    現在HPをリニューアルしています。 旧サイトと新サイトは同じサーバー、同じドメインを使用しています。 旧サイトのデータはFTP内にはありません。 所在地マップに、GoogleMapを使用しています。 そこで、下記のようなエラーが出ます。 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/signup.html で作成できます。 Google Maps API サーバーでリクエストが拒否されました。リクエスト内で指定した「sensor」パラメータには「true」または「false」のいずれかを指定する必要があります。 次に上記で指定されている http://code.google.com/apis/maps/signup.html にて、URLを指定して、APIを生成ボタンを押す 次にJavaScript Maps API の例で表示された <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=*********************************" type="text/javascript"></script> をエラーが表示されるページに貼り付ける ここまでの作業をおこなっております。 ただ、これで正しいのかが分かりません。 詳しい方からのご助言頂けますでしょうか？

    • 締切済み
    • devl
    • HTML
    • 回答数3
  • Google Maps APIについて

    グーグルのWebAPIの使用制限がよく分かりません。 例えば http://maps.googleapis.com/maps/api/elevation/xml?locations=緯度経度&sensor=false にアクセスすると緯度経度の場所の標高が入ったxmlファイルが得られることが分かりました。 実際にブラウザのアドレスバーに打ち込んで確認済みです。 まだ手をつけていないのでできるか分かりませんが、自作ソフト（一応BASIC言語系で作ります）で、これを使って 緯度経度をキーボード入力 ↓ xmlを取得 ↓ 解析、標高を取得！ ということをやりたいのですが、利用規約が大量＆英語でよく分かりません。 (1) そもそもこういう物を作ってはいけないとかありますか？ (2) 作れたとして不特定多数（といっても友人程度でしょうか）に配付ってできますか？ (3) 地点が数百箇所になると思います。確か一日2500回の使用制限があったと思うのですが、この場合も2500箇所以降は取得失敗になるのでしょうか？ また、(2)のように使った場合、使用制限の回数は ●「ソフトを使った人全員のアクセス数合計が2500回で全員が不能」 ●「2500回アクセスした人のみ不能」 のどちらになるのでしょうか？ (3)↑の(1)(2)ができなかったとして類似のサービスもしくはdllなどってありますかね？ なおソフトは商用目的とか企業でどうとかするものでなく、私の趣味で使うものです。 お金を払って会員にならなくてはならないとかだったら諦めます。 だいぶ面倒かと思いますが、どなたかよろしくお願いいたします。 https://developers.google.com/maps/terms?hl=ja#section_10_12 https://developers.google.com/maps/documentation/elevation/?hl=ja

もっと見る