• 締切済み

Google Mapでオリジナルレイヤーの切り替えに関して

Google Mapでオリジナルレイヤーの切り替えに関して Google Mapの基本地図にオリジナルレイヤーを重ねて マップタイプ切り替えボタンで重ねたり消したりしたいのですが、 うまくいきません。。 <script type="text/javascript"> //<![CDATA[ var center = new GLatLng(35.6853, 139.7532); var map = new GMap2(document.getElementById("map")); var normal = new GMapType(G_NORMAL_MAP.getTileLayers(), G_NORMAL_MAP.getProjection()," ごく普通の地図"); var custom = new GMapType(tilelayer, G_NORMAL_MAP.getTileLayers(), "オリジナル"); var normalTileLayer = G_NORMAL_MAP.getTileLayers()[0]; var tilelayer = new GTileLayer(new GCopyrightCollection(), 0, 17); tilelayer.getTileUrl = function(tile, zoom) { return"test.jpg"; // 普通の地図のタイルを返す }; tilelayer.getOpacity = function() {return 0.55} // 不透明度を55%にしたものを返す map.getMapTypes().length = 0; map.addMapType(normal); // 普通の地図 map.addMapType(custom); // オリジナル map.setCenter(center, 15, custom); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addOverlay(new GTileLayerOverlay(tilelayer)); // 新しく作ったタイルレイヤーを重ねる //]]> </script> どこがおかしいのでしょうか。。。？？

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

実現しようとしてる事（目的）が今ひとつ解りませんが、 どこがおかしいのでしょうか。。。？？ ＝＞ tilelayer.getTileUrl = function(tile, zoom) { return"test.jpg"; // 普通の地図のタイルを返す }; tilelayer.getOpacity = function() {return 0.55} そんなメソッドの使い方出来ないです。読み取りだけです。 //不透明度を55%にしたものを返す ＝＞それは不可能です。 map.addMapType(normal); // 普通の地図 冗長です。税所から普通の地図はありますです。 map.addOverlay(new GTileLayerOverlay(tilelayer)); // 新しく作ったタイルレイヤーを重ねる これも冗長です。maptypeで追加してるから、オーバーレーとして重ねる必用ないです。 ※自分でタイルレイヤーを用意するんじゃなく、Google提供のレイヤーの重ね合わせの 制御をGMapTypeControl()でするのなら、下のサンプルのように出来ます。 （API Ver2系です。試す時は全角空白は半角空白に差し替えてね） サンプル（G_HYBRID_MAPのレイヤー１（地図部分）にG_PHYSICAL_MAPのレイヤー0 （地形部分）を重ねあわせたオリジナルのMAPTYPE(CUSTOM)をMapTypeControlに追加 して、基本地図以外のマップタイプを消去） <script type="text/javascript" charset="utf-8"> <!-- function load(){ 　var center = new GLatLng(35.6853,139.7532); 　var map = new GMap2(document.getElementById("map")); 　var normallayer = G_HYBRID_MAP.getTileLayers()[1]; 　var customlayer = G_PHYSICAL_MAP.getTileLayers()[0]; 　var custom = new GMapType([customlayer,normallayer], 　　　　　　　　　　　　　　 G_NORMAL_MAP.getProjection(), 　　　　　　　　　　　　　　"オリジナル"); 　map.removeMapType(G_SATELLITE_MAP); 　map.removeMapType(G_HYBRID_MAP); 　map.addMapType(custom); // オリジナル 　map.setCenter(center,10,custom); 　map.addControl(new GLargeMapControl()); 　map.addControl(new GMapTypeControl()); } </script> </head> <body onload="load();" onunload="GUnload();"> <div id="map" style="width:800px; height:600px; border:2px solid black;"></div> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • グーグルマップについて教えてください。

    【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか？ ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8); 　　 map.addControl(new GMapTypeControl()); 　　 map.addControl(new GLargeMapControl3D()); 　　 streetview = new GStreetviewOverlay(); 　　 map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() { 　　　　myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

  • グーグルマップについて困っています。

    グーグルマップをホームページに貼り付ける作業をしているのですが、 グーグルマップの右下にミニマップを表示させているのですが、この ミニマップをもっと広域にして表示させたい（日本地図全体が表せるくらい）のですがどのようにすればよいのでしょうか？ よろしくお願いします。 var miniMap=new GOverviewMapControl(new GSize(150,112));map.addControl(miniMap);

  • Googleマップ上で、オリジナルのマーカーを表示したい

    Googleマップ上で、オリジナルのマーカーを表示したい WEBサイトに表示しているミニ写真画像にマウスオーバーしたら、 Googleマップでマーカーを使ってその写真の場所を表示し、拡大写真も表示するようにしたいと思い、 下記のサイトを参考にして、作成しています。 http://ascii.jp/elem/000/000/421/421381/ Googleマップのデフォルトマーカーを使っては、希望通り、 上記のサイトのようなものができました。 ここで、表示する間隔が狭いので、わかりやすく、数字を振った オリジナルマーカーを使って表示したいと思うのですが、 それがうまくできません。 jisファイルは下記のように書いています。 $(function(){ var map = new GMap2(document.getElementById("gmap")); var firstData = $(".map:first").attr("longdesc").split(","); $("#googlemap").html("<img src=" + firstData[0] + ">"); var pos = new GLatLng(parseFloat(最初に表示する緯度),parseFloat(最初に表示する経度)); map.addOverlay(new GMarker(pos)); map.setCenter(new GLatLng(最初に表示する緯度, 最初に表示する経度), 15); map.addControl(new GSmallMapControl()); $(".map").mouseover(function(){ var shopdata = $(this).attr("longdesc").split(","); $("#googlemap").html("<img src=" + shopdata[0] + ">"); var markerIcon1 = new GIcon(); markerIcon1.image = "./img/flg-"+shopdata[3]+".png"; markerIcon1.iconSize = new GSize(20, 34); markerIcon1.iconAnchor = new GPoint(10, 34); var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]), markerIcon1); if($(this).attr("flag")) return; map.panTo(marker1, 9); map.addOverlay(marker1); $(this).attr("flag", true); }); }) HTMLのミニ画像を表示している部分は以下です。 <img src="./img/map-1.jpg" class="sekomap" longdesc="./img/map1-1.jpg,緯度,経度,マーカーに表示したい数字"> プログラムに間違いがあるかもしれませんが、 この状態ですと、エラーになって、オリジナルのマーカーも表示されないし、 ミニ写真の位置にも移動しなくなってしまいます。 どなたかご存じの方いらっしゃいましたら、教えてください。 色々調べましたが、もうお手上げ状態です。。（ToT）

    • ベストアンサー
    • AJAX
  • googleマップがWinIEのみエラーになってしまします。

    googleマップの地図をサイトに入れているのですが、WinIEのみ６も７も表示されません。FireFOX,Safariなどは閲覧できます。 地図が表示されないだけでなく、ページ自体がエラーで表示できなくなってします。(地図以外の静的なHTMLも) 記述以下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル</title> </head> <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=キー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(緯度を入れています), 0); var point = new GPoint(緯度を入れています); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow("<!--<img src=images/byld.jpg>--><img src=/images/logo02.gif>"); //]]> </script> 原因かどうか解りませんが、同じURLでAPIキーを取得2回取得しています。（1回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。

  • google mapのピンを変更したい

    お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); //　センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。

  • google マップ サイズ変更

    グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>

  • google mapで二番目以降のマップが表示されない

    自作のマーカーを使い、マーカーをクリックすると吹き出しが出るようにして、マップ上２か所にマーカーを付けたのですが、２番目のマーカーが全く反映されません。 下に書いたものがそのコードなのですが、見直してもどこにミスがあるのかわかりません… どなたか解決策をお願いします… <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.384521484375,34.73709847578162), 8　); var icon = new GIcon(); icon.image = "　pngイメージ画像　"; icon.shadow = "　pngイメージ画像　"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // １番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // １番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); // ２番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // ２番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); //]]> </script>

  • google　map

    こんにちは。最近「google　map」を使いはじめまして、 いろいろと地図を作って試しているのですが、わからない ことがありまして。。お願い致します。 google　mapの「サイドバー」と「吹き出しのタブ」の 両方を同時に表示させたいのですが、どのようにすれば よろしいのでしょうか。 「サイドバー」と「吹き出しタブ」を別々に表示させること はできたのですが、どうしても両方を同時に表示させること ができません。 サイドバーは以下のような感じで作っています。 function createMarker(point, name, html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers[i] = marker; htmls[i] = html; sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />'; i++; return marker; } function myclick(i) { gmarkers[i].openInfoWindowHtml(htmls[i]); } 吹き出しタブは以下のような感じで作りました。 function createTabbedMarker(point,html1,html2,label1,label2,n) { var marker = new GMarker(point,icon[n]); GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]); }); return marker; } どうぞ、よろしくお願い致します。

  • googleマップが表示されない。

    Google Maps APIを使用しホームページに地図を載せているのですが、自分自身のパソコンではFTPイメージを出力した出力先html、ネット上でもしっかりと地図は表示されているのですが、他の人のパソコンで見てみると表示しません。 下記のようにGoogle Maps APIでキーを取得し作成したのですが、どこかおかしいところがあるのでしょうか？申し訳ありませんがアドバイスよろしくお願いします。 <!-- key=*** の***部分をグーグル( http://www.google.com/apis/maps/signup.html )から取得し、入れ替える --> <SCRIPT src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAUV0srDj6343wV8Rdpy-xRRQ2GBzO3UXWtLA5PQfCol6gfChjOhS-izw7H3T2ywNEuQOminx4rgEgGw" type="text/javascript"></SCRIPT> <!-- ここへ地図を出力します↓ 地図の大きさの変更はwidthとheightの数値を使います。 --> <div id="map" style="width: 500px; height: 500px"> </div> <SCRIPT type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById('map')); map.addControl(new GLargeMapControl()); //所在地の座標設定 var lon = ○○;//経度 var lat = ○○;//緯度 var myoffice = new GPoint(lon,lat); //所在地を中心にする map.centerAndZoom(myoffice , 0);// 数値部分を変えると詳細-広域に変更できます。0-17 　　//中心を所在地と別に設定する場合 　　//map.centerAndZoom(new GPoint(○○, ○○) , 0); // 所在地の地点にアイコンを設定する // Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var baseIcon = new GIcon(); baseIcon.shadow = 'http://www.google.com/mapfiles/shadow50.png'; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25); var icon = new GIcon(baseIcon); icon.image = 'http://www.google.com/mapfiles/markerA.png'; //所在地を表示する var marker = new GMarker(myoffice,icon); //var marker = new GMarker(myoffice);// デフォルトのマーカー画像を利用する場合 map.addOverlay(marker); //]]> </SCRIPT>

  • GOOGLE　MAPを別ウインドで表示

    ホームページ作成初心者です。 ネットの検索で、以下スクリプトで自分の作成したホームページにGoogleMAPを表示することができました。しかしこのやり方ですと、表示する地図ごとにHTMLで記述する必要があるように思います。当方は表示したい地図が１００個以上あるので全てHTMLファイルを作成するのは困難です。できればホームページに地図ボタンを１００個作成し、ボタンを押されたときに引数として必要パラメータを渡して、地図表示を行うHTMLファイルをひとつ用意しておいて、そのHTMLファイルで全ての地図表示をするように変更したいのですが、どうしたらよいかご存知の方がいましたら教えて頂けないでしょうか？ 以下が使用しているGoogleMAP表示のソースです。 <body> <div id="map" style="width: 800px; height: 180px"></div> <div id="message"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); // ３．で取得した 緯度、経度を （経度, 緯度）の順で入力する // // new GPoint(139.711606, 35.646643) ←この部分 // var point = new GPoint(139.48270082473755, 35.90869157631627); map.centerAndZoom(point, 0); var icon = new GIcon(); // マーカーのアイコン画像指定 icon.image = "map_arrow.png"; // マーカーの影アイコン画像指定 icon.shadow = "map_arrow_shadow.png"; // アイコンのサイズを記述 icon.iconSize = new GSize(34, 25); // 影アイコンのサイズを記述 icon.shadowSize = new GSize(34, 25); icon.iconAnchor = new GPoint(1, 23); icon.infoWindowAnchor = new GPoint(10, 10); // もう一度マーカーのアイコン画像指定 icon.transparent = "map_arrow.png"; var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function() { // // marker.openInfoWindowHtml("<b><a href='http://www.goo.ne.jp/'>マル広</a></b>" ); }); map.addOverlay(marker); //]]> </script> </body> 以上です。なにぶん初心者なので、他に必要な情報など ありましたらご教示お願いします。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する