Google Map に Bootstrap を適用する

見映えの問題で、標記のことについて実施しているところですが
問題が発生しました。
例えば

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GoogleMap Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- GoogleMaps API -->
<script src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
  #map_canvas { height: 100% }
</style>
<script>
$(function(){
  var latlng = new google.maps.LatLng(35.66, 139.69);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($('#map_canvas').get(0), options);
});
</script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div id="map_canvas"></div>
    </div>
  </div>
</body>
</html>

は、正しくMapが表示されます。
このソースの先頭に

<!DOCTYPE html>

を追加すると、途端に表示されなくなります。
色々調べて行くと、原因は行の高さにあるらしい。

<style>
  #map_canvas { height: 500px }
</style>

のように、明示的に高さを指定すると確かに表示されるようになります。
でも、これじゃBootstrapを使用する意味がないではないか!
と言うことで、再び「%」に戻すため「height %」でググり、cssの勉強し直し。
“height 100%” が有効になるためには、親要素全てが “height 100%” で
なけれならないとのこと。されば、

<style>
  html,body,body > div,body > div > div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

としたところ、見事表示されました。
先ずは、目出度し目出度しと言いたいところだが
Bootstrapを使用すると、どうしてもコンテナの階層が深くなるので
これを適用するのが良いのか悪いのか?
悩ましい問題ではあります。

なお、指定をもっと簡単にしようと

<style>
  html,body,body div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

等とすると、map_canvas 内に設定された要素(Google Map)にまで
影響が出るので、丁寧に map_canvas の親要素のみを指定する必要
があります。

オブジェクトの中身を簡単に確認する

他の方からの貴重な情報です。
(1) FireFox の場合

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(person);

/* 結果
Object { Name: "John", Hobby: Array[2] }
*/

Array[2]の部分も表示するには、以下のようにします。

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(person.toSource());

/* 結果
({Name:"John", Hobby:[{Hobby1:"Tennis"}, {Hobby2:"Golf"}]})
*/

なお、Chromeでは toSource() がないので、以下のようにするそうです。

var person = {Name:"John", 
    Hobby:[{Hobby1:"Tennis"},{Hobby2:"Golf"}]};
console.log(JSON.stringify(person));

以上です。

GoogleMapとjQuery

これから長い呟きを開始します。
独り言かも・・・

随分以前から、GoogleMap API と共にjQueryが
使えないかと悩んだり、調べまくったりしてきた
のですが、今日、その答えが出ました。

問題点を整理すると、地図を表示する場合

var myOptions = {
  zoom: myzoom,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP    //デフォルトの道路地図を表示
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

とすると、latlngで指定した地点を中心とした地図が表示されます。

jQueryを知っている(多少齧った)人間には

document.getElementById("map_canvas")

の部分が気に入らず、

$("#map_canvas")

と書きたいのです。
でも、そう書くと地図が表示されないのです。

その理由が、今日判明した次第です。
結論を先に言うと

$("#map_canvas").get(0)

と書くことで、地図は表示されるようになります。

なぜ?
id属性はユニークでなけれならないので、getElementById は単一の要素に
マッチします。jQueryの$(“#map_canvas”)も当然単一の要素にしかマッチ
しませんが、結果が配列で返されるので、get(0) によりその先頭要素のみを
返すようにする必要があるのです。

ここさえ押さえれば、GoogleMapにjQueryを大手を振って使用できます!

以後は、余談です。
本件について、いろいろ調べていると、jQueryを指定するのに

</script>
  google.load("jquery", "1.3.2");
</script>

のように、jsapi を使用してjQueryをロードしているケースが、複数のサイトで
見受けられました。
このロード方法には、特段何の意味もなく、一般的な方法で

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

と、書くことと同じです。
もしろ、google.load でロードできるのは jQuery-1.7 までで、それ以降のバージョンはロードできませんので、このメソッドは使わない方が無難です。

最後に、簡単な使用例を以下に示しますので参考にしてください。

<html>
<head>
<title>Enjoy with Google Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", 1.7);
</script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#abtn").click(function() {
    if (marker != null) {
      marker.setVisible(false);
      delete marker;
    }
    codeAddress($("#aname").val());
  });

  var codeAddress = function(areaname) {
    if (geocoder) {
      geocoder.geocode({'address': areaname}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successfull for the following reason: " + status);
        }
      });
     }
  }

  var myOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var marker = null;
  var geocoder = new google.maps.Geocoder();
  // get(0)に注目:マッチした要素の配列から、その先頭要素を返します。
  var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
  codeAddress("甲府");
});
</script>
</head>
<body>

<h1>Google Map</h1>


<div id="map_canvas" style="width:480px; height:400px;"></div>



  <input type="text" id="aname" value="" />
  <input type="button" id="abtn" value="ポイント表示" />


</body>
</html>

Bluegriffon1.8の xml parsing error

以前、ちょっと使ったことのある Bluegriffon を再度インストールした。
versionは1.8。
しかし、起動しようとするも、次のエラーで立ち上がらない。

XML Parsing Error: undefined entity
Location: chrome://bluegriffon/content/xul/bluegriffon.xul
Line Number 146, Column 4:
   <key id="key_BGdelete" key="&deleteCmd.key;" modifiers="accel" command="cmd_BGdelete"/> 
   ---^

雲をつかむようなエラーメッセージ。
何が気に入らないのか全く分からない。
インターネット上を探してみても、なかなか有効そうな解決手段が見つからない。
その中で、一番可能性がある解決手段は再インストール!
(1) コントールパネルからBluegriffonをアンインストール
(2) C:\Users\username\AppData\Local\Disruptive Innovations SARL ディレクトリを削除
(3) C:\Users\username\AppData\Roaming\Disruptive Innovations SARL ディレクトリを削除
として、Bluegriffonを再インストール。

幸いにも、これで、無事起動するようになりました

私の場合は、古いものが(2)と(3)に残っていたのが原因だったようです。

初めてインストールした方に、同様なエラーが発生する場合は
user名に日本語を使用している
ことが原因との指摘があります。
英字のユーザを登録すれば対策は可能ですが、そこまでしたくない方は、Bluegriffonの対策待ちしかありません。