Google Maps API v3 用ローカルサーチ(Local search)の検索結果のアイコンについて

1,014 views
Skip to first unread message

Somo

unread,
Dec 12, 2012, 7:31:48 PM12/12/12
to google-map...@googlegroups.com
初めまして。 よろしくお願い致します。

Google maps API V3用のローカルサーチ検索ボックスを設置しようと、「jGoogleBarV3.js」 を追記し、上手く表示するこ
とが出来ました。


デフォルトでは、検索結果に出てくるアイコンが “A” で設定されている("/solutions/localsearch/img/pin_metalred_")の
ですが、これを独自のアイコンに変更するにはプログラムをどのように変更すればいいでしょうか。

プログラムを見ると、影( 'shadow' : )も設定されているのですが、影は別にいりません。

「jGoogleBarV3.js」の関係箇所↓

(function(){
 var   gsearch_css='default.css', // You need to edit this so it it points to your version of the default.css
  m=google.maps, // fewer keystrokes is good
  defaultOptions={ // default options for the control; should be pretty self-explanatory
   'resultSetSize' : 8,
   'clearResultsString' : 'X',
   'minimizeResultsString' : '_',
   'maximizeResultsString' : '^',
   'icons' : [],
   'shadow' : new m['MarkerImage']('http://www.google.com/mapfiles/gadget/shadow50Small80.png',null,null,new m.Point(8,28)),
   'showResultsList' : true,
   'showResultsMarkers' : true,
   'searchFormOptions' : {}
  };
 
 for(var i=0;i<8;i++){ // initialize our default markers
  defaultOptions['icons'].push(google['loader']['ServiceBase'] + "/solutions/localsearch/img/pin_metalred_" + String.fromCharCode(65+i) + ".png");
 }

以上、ご教授頂けると有り難いです。
よろしくお願い致します。

Masashi.K

unread,
Dec 13, 2012, 7:14:39 PM12/13/12
to Google-Maps-API-Japan
jGoogleBarV3.jsプロジェクトのトップページに
「NO LATER THAN November 2013(2013年11月以降は利用できない)」とあるように、
すでに廃止されたAPIを使用しているので、あまりおすすめできません。
http://code.google.com/p/gmaps-api-v3-googlebar/

Google Maps Javascript APIには、Autocomplete、SearchBoxなど代わりとなる機能が
既にありますので、そちらを利用されると良いと思いますがどうでしょうか。

- Auto Complete
https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete

- SearchBox
https://google-developers.appspot.com/maps/documentation/javascript/examples/places-searchbox

On Dec 12, 4:31 pm, Somo <attaka...@gmail.com> wrote:
> 初めまして。 よろしくお願い致します。
>
> Google maps API V3用のローカルサーチ検索ボックスを設置しようと、「jGoogleBarV3.js」 を追記し、上手く表示するこ
> とが出来ました。
>
> http://code.google.com/p/gmaps-api-v3-googlebar/source/browse/trunk/j...

Somo

unread,
Dec 13, 2012, 10:36:09 PM12/13/12
to google-map...@googlegroups.com
Masashi.K 様

ご回答ありがとうございます。

私、Masashi.K 様の本(Google maps API プログラミングガイド)購入しています。
SearchBox についても、そちらに紹介されていました。すみません。m(_ _)m

同じ時期に質問させて頂いた 「地図上をクリックすると情報ウィンドウが閉じるように設定したい」
で記載した FusionTable を利用したマップに、このSearchBox を追記しようと、試したのですが、
どうも上手くいきませn。

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
        var layer = new google.maps.FusionTablesLayer({ 
          query : { 
            select : 'Geocodable address', 
            from : '1LcWhkgH2hr4FsCDIXJZfDCxds3TWW4GgnVLkhHQ' 
          }, 

検索結果に独自iconを表示することと合わせてお願いできないでしょうか。
よろしくお願い致します。m(_ _)m


Masashi.K

unread,
Dec 14, 2012, 2:41:26 AM12/14/12
to Google-Maps-API-Japan
Somoさん

Fusion Tablesに独自iconを設定することはできないです。
いくつかの用意された中から利用するしか方法はないです。

Google maps API プログラミングガイド 改定2版のp278 あたりを参考にしてください。
-----

検索機能は、Fusion Tablesのデータを検索したいのでしょうか?

Somo

unread,
Dec 14, 2012, 3:14:17 AM12/14/12
to google-map...@googlegroups.com
Masashi.K 様

FusionTable の中のデータを検索するのではなく、紹介して頂いた SearchBox で、
自宅の住所を検索し、その検索結果としてFusionTable レイヤー上に、デフォルトの
ピンではなくて、例えば、家のアイコンを表示したいのです。m(_ _)m

また、FusionTable を利用したマップに、このSearchBox を追加しようとした時に、
FusionTableのIDが入ったコード↓

var layer = new google.maps.FusionTablesLayer({query: {select: 'Geocodable address', from: '1HM-Ekg-wYkV35yE24dnXwdZBw0T7FmDio9QgCuc'}});layer.setMap(map);}

を、どのように下記コードに追記すればいいのでしょうか。

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.661382, 139.766084);
var mapOpts = {
zoom: 13,
center: latlng,
mapTypeId:  google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById("map_canvas");
var mapCanvas = new google.maps.Map(mapDiv, mapOpts);
var searchbox = new SearchBox();
searchbox.setMap(mapCanvas);
}
window.onload = initialize;
</script>

何度も申し訳ありませんが、よろしくお願い致します。m(_ _)m
Reply all
Reply to author
Forward
0 new messages