地図の実験用ソース
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta name="copyright" content="(C) 2013 Seishin Nakama All Rights Reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- 表題 -->
<title>はじまりの自作ゲーム</title>
<!-- jquery js -->
<script type="text/javascript" src="./jquery/js/jquery.js"></script>
<!-- GoogleMap APIを取得するスクリプト -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- スクリプト実装 -->
<script type="text/javascript">
<!-- 情報表示用実装 -->
$(document).ready(function(){
// 地図初期化
initialize();
// 内包情報を表示(info ボタンクリック時)
$('#cmdInfo').click(function() {
// 1) $('.gm-style').first() で gm-style のブロックを得る
// 2) .find('div').first() で gm-style のブロックに内包される最初の div ブロックを得る
// 3) .find('div').each で 2) に内包されるエレメントを列挙する
$('.gm-style').first().find('div').first().find('div').each(function(index , elm) {
if (index == 0) {
// 4) 最初のエレメント z-index: 1 の内包情報を表示
dump(elm);
}
});
// クリック伝播を抑止
return false;
});
});
<!-- 地図初期化関数 -->
function initialize() {
// 緯度・経度(渋谷駅周辺)
var latlng = new google.maps.LatLng(35.658034, 139.701936);
// 地図の制御用オプション
var myOptions = {
// 拡大倍率
zoom: 16
// 地図の中心を指定
, center: latlng
// 地図の種類
, mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 地図を表示
var map = new google.maps.Map(document.getElementById("map_block"), myOptions);
}
<!-- ダンプ -->
function dump(obj) {
if (obj) {
if (obj.length !== undefined && obj.length > 0) {
for (var idx = 0; idx < obj.length; idx++)
dump(obj[idx]);
}
else {
$.each(obj, function( key, value ) {
console.log( key + ": " + value );
});
}
}
}
</script>
</head>
<body>
<h1>地図の表示実験</h1>
<!-- 地図の表示領域 -->
<div id="map_block" style="width:400px;; height:400px;"></div>
<br/>
<input id="cmdInfo" type="button" value="info" />
</body>
</html>