「JavaScript」カテゴリーアーカイブ

Google Maps API Version3 infoWindow

投稿日時: 投稿者:

Google Maps API Version3 の infoWindow についてです。

  • 1. マーカーをクリックした時に、他の infoWindow が閉じるようにしたい
  • 2. infoWindow に表示する内容を個別に指定したい
  • 3. ある程度 infoWindow のサイズをコントロールしたい

という要件があり、色々やってみたところなんとかできました。

忘れないようにメモです :mrgreen:

まずは地図の表示です。

...色々...
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="gmap" style="width:500px; height:500px;"></div>
<script type="text/javascript">
      var latlng = new google.maps.LatLng(35.710126,139.810665);
      var myOptions = {
          zoom: 10,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
つづく...

次にマーカーと各マーカー用の infoWindow の指定です。

...つづき
var infoWindow;
var content;
 
//marker1
var myLatLng1 = new google.maps.LatLng(35.810126, 139.610665);
var marker1 = new google.maps.Marker({
    position: myLatLng1,
    map: map
});
google.maps.event.addListener(marker1, 'click', function() {
    if (infoWindow) infoWindow.close();
    infoWindow = new google.maps.InfoWindow({
        content: '<div style="width:200px;height:100px;"><p>マーカー１</p></div>'
        })
    infoWindow.open(map, marker1);
});
 
//marker2
var myLatLng2 = new google.maps.LatLng(35.710126, 139.610665);
var marker2 = new google.maps.Marker({
    position: myLatLng2,
    map: map
});
google.maps.event.addListener(marker2, 'click', function() {
    if (infoWindow) infoWindow.close();
    infoWindow = new google.maps.InfoWindow({
        content: '<div style="width:200px;height:100px;"><p>マーカー２</p></div>'
        })
    infoWindow.open(map, marker2);
});
 
//marker3
var myLatLng3 = new google.maps.LatLng(35.710126, 139.810665);
var marker3 = new google.maps.Marker({
    position: myLatLng3,
    map: map
});
google.maps.event.addListener(marker3, 'click', function() {
    if (infoWindow) infoWindow.close();
    infoWindow = new google.maps.InfoWindow({
        content: '<div style="width:200px;height:100px;"><p>マーカー３</p></div>'
        })
    infoWindow.open(map, marker3);
});
</script>

sary

投稿日時: 投稿者:

sary について。

sary はテキストボックスなどの入力支援を行ってくれる便利なモノです。
他にも用途は沢山あると思いますが。

例えばテキストボックスで住所を入力する際に文字を入力すると入力された文字
から始まる入力候補を表示してくれます :mrgreen:

「富山県」と入力したい場合に、

「と」と入力すると入力候補として「東京都、富山県、栃木県、鳥取県、徳島県」
の「と」から始まる都道府県名を表示してくれます。

さらに「とや」と入力すると「富山県」が入力されます。

これは前方一致で、自分もこのような検索を行いたかったのですが、「と」と
入力すると先頭以外に「と」を含む「京都府」が候補として表示されてしまいました 🙁

前回設定した時のメモを見ても特に何も書いてなかったので文字コードの問題か？
とか、サーバが違うから関連するライブラリが違うから？
等と色々と悩みましたが Google で検索したところ

mksary コマンドに -l オプションを付ければ良い事が分かりました 😛

$ mksary --help
Usage: mksary [OPTION]... FILE
  -a, --array=NAME       set the array file name to NAME
  -b, --block=[SIZE]     sort block by block with SIZE [4096] KB block
  -i, --index            assign index points and write them to an array file
  -s, --sort             sort an array file
  -l, --line             index every line
  -w, --word             index every word delimited by white spaces
  -c, --encoding=NAME    handle NAME encoding for indexing
                         [bytestream], ASCII, ISO-8859,
                         EUC-JP, Shift_JIS, UTF-8
  -L, --locale           enable locale support (use mblen for indexing)
  -t, --threads=NUM      set number of threads for block sorting to NUM
  -q, --quiet            suppress all normal output
  -v, --version          print version information and exit
  -h, --help             display this help and exit

最初に help を見れば良かった ❗

jQuery.js と prototype.js の共存

投稿日時: 投稿者:

noConflict() で $() の競合を回避すれば良いみたいです。

沢山の方が blog で書いていますが jquery を使っている JavaScript
(以下の場合 depend_on_jquery.js) の $() を jQuery() にしたら解決しました。

<script src="js/prototype.js" type="text/javascript"></script>
 
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
    jQuery.noConflict();
// --></script>
<script src="js/depend_on_jquery.js" type="text/javascript"></script>

JavaScript のコメント

投稿日時: 投稿者:

コメントは /* */ で！

日本語のコメントを以下のようにしていてハマりました。

//コメント
 
foo = bar;
 
alert(foo);

foo に bar が代入されません！

以下のようにコメントを変更したところOK。

/* コメント */
 
foo = bar;
 
alert(foo);

JavaScript はあまり扱わないのですが、機会が増えそうなので忘れないようにメモ。

文字コードがいけないのかな…？
それとも改行コードかなぁ…？

回避方法を見つけたので深く追求せず。