Google Mapでオリジナルのピンマークを設定する方法
- お店の位置をホームページ上でGoogle Mapを使い、お客様にお知らせしたい場合、Google Maps API keyを取得し、位置情報を入力することが必要です。
- 初期設定では赤いピンマークが表示されますが、オリジナルのピンマークに変更する方法を紹介します。
- ピン情報を入力する場所は「お店位置」の部分です。ここに正確な緯度・経度を入力してください。また、表示する情報や画像などもこの部分で設定することができます。
- ベストアンサー
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> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。
- tallyho5
- お礼率14% (17/114)
- Windows XP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
オリジナルマーカーに関しては、以下のページが参考になるかと http://googlemaps.googlermania.com/2-2.html 元のソースがVer1なのと、同じ行が複数書かれてたりするので、この際書き直した方が・・・
関連するQ&A
- 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>
- ベストアンサー
- JavaScript
- Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには
いつもお世話になっております。 Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。 - 要望 ------------------------------------------- 1.Google Maps内にカテゴリ1～6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。 2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。 -------------------------------------------------- [1]に関してはできたのですが、[2]のやり方がわかりませんでした。 代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて iframe内で表示するというのを出したのですが、 “同マップ上でアイコンだけ表示したり消したり”したいとの ことでした。 [1]を実現するのに使用したコードが下記になります。 (※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます) ----------------------------------------------------- function createMap() { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(緯度, 経度), 13); var icon = new GIcon(); icon.image = "marker.png"; icon.shadow = "shadow.png"; icon.iconSize = new GSize(20, 34); icon.iconAnchor = new GPoint(10, 34); icon.infoWindowAnchor = new GPoint(7, 1); var icon2 = new GIcon(); icon2.image = "marker2.png"; icon2.shadow = "shadow.png"; icon2.iconSize = new GSize(20, 34); icon2.iconAnchor = new GPoint(10, 34); icon2.infoWindowAnchor = new GPoint(7, 1); var point001 = new GLatLng(緯度, 経度); var marker001 = new GMarker(point001, icon); map.addOverlay(marker001); GEvent.addListener(marker001, 'click', function() { marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); var point002 = new GLatLng(緯度, 経度); var marker002 = new GMarker(point002, icon2); map.addOverlay(marker002); GEvent.addListener(marker002, 'click', function() { marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); } ---------------------------------------------- ここまで 方法について、ご存じの方がいらっしゃったら 教えていただきたいです。 よろしくお願いいたします！
- 締切済み
- AJAX
- 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>
- ベストアンサー
- レンタルサーバ・ASP
- 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> 以上です。なにぶん初心者なので、他に必要な情報など ありましたらご教示お願いします。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 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&v=2&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回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- Googleマップのウィンドウの表示
Googleマップの情報ウィンドウの件ですが、ページが開いた瞬間ウィンドウが開いた状態にしたいのですが、 クリックしてウィンドウを開く方法しかわかりませんでした。 ワンクッション置かずにウィンドウを表示させる方法はありませんでしょうか？ 以下が関連のソースになります。 上手くカスタマイズできませんでしょうか。（座標はダミーです） よろしくお願いいたします。 //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 function createMarker(point, icon, html) { var marker = new GMarker(point, icon); //クリックしたら吹き出し表示 GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //アイコンを追加 map.addOverlay(createMarker(new GLatLng(105.612038, 27.409698), icon, "<nobr><b>aaa<br>aaa</b><br>aaa<br>aaa</nobr>"));} }
- ベストアンサー
- その他（プログラミング・開発）
- サイドバー付き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 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; } どうぞ、よろしくお願い致します。
- 締切済み
- HTML
- Google Maps API の IE表示
一部のIEでGoogle Maps APIがうまく作動しません。 Safari/FF/IE8 では表示されます。 以下の処理は一通り試しました。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願いいたします。 ■HTML … <link href="style.css" rel="stylesheet" type="text/css" media="screen, print "/> <link rel="stylesheet" type="text/css" href="map.css" media="screen, print "/> <script type="text/javascript" src="gmap.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=●●●" type="text/javascript"></script> … <div id="canvas"></div> … ■JavaScript // JavaScript Document window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("canvas")); var point = new GLatLng(●緯度●, ●経度●) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">')}); map.addOverlay(marker); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setCenter(point, 15); map.openInfoWindowHtml(point, '<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">'); } };
- ベストアンサー
- JavaScript
- GoogleMaps API 住所から複数ピンを表示
GoogleMaps API素人ですが・・・ 最近いろいろやっていてやっとDBの住所（日本語の住所 例：大阪府大阪市中央区平野町1丁目）を引っ張ってきてグーグルマップで座標を取得してピンを立てることに成功しました。 今苦戦しているのは同じ地図上に複数のピンをさす方法です。 どなかた教えていただけないでしょうか？ ちなみに今１ピン表示に成功してるコードはこちらです。 どこから、どこまで繰り返したらいいのでしょうか・・・？ －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <? //DB（MySQL）からデータ取得 $address = $row["address"]; $fukidashi = "住所：".$row["address"]; ?> <div id="map" style="width:500px; height:400px; border:1px solid #999;"></div> <script type="text/javascript"> <!-- var map = null; var geocoder = null; var address = "<?=$address;?>"; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); geocoder = new GClientGeocoder(); geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " の住所が見つかりません"); } else { map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); //吹きだし情報 var msg_html1 = "<?=$fukidashi;?>"; marker.openInfoWindowHtml(msg_html1); } } ); } } //--> </script>
- ベストアンサー
- JavaScript
