Javascriptista

グーグルマップでは、オリジナルのコントロールを作って表示することが可能です。
このサンプルでは、｢太陽の塔」というボタンを作り、地図を動かした後にこのボタンを押すと、太陽の塔に戻ってきます。
SAMPLE







解説

---

<script type="text/javascript">

onload = function() {


  var myOptions = {
    //倍率5倍
    zoom: 16,
    //北緯、東経
    center: new google.maps.LatLng(34.809454, 135.532331),
    //マップスタイルは、ロードマップ
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    //ナビゲーションコントロール
    navigationControl: true,
    navigationControlOptions: {
      style:google.maps.NavigationControlStyle.ZOOM_PAN
    },
    //マップタイプコントロール
    mapTypeControl:true,
    mapTypeControlOptions:{
      style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },
    //スケールコントロール
    scaleControl:true
  };
  //表示枠を指定
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  //マーカーオブジェクトの生成
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(34.809454, 135.532331),
    map: map,
    title: "太陽の塔"
  });

  //インフォウィンドウオブジェクトの生成
  var infowindow = new google.maps.InfoWindow({
    content: '<div style="font:color;navy">太陽の塔</div><img src="http://praiation.shiriagari.com/javascript_samples/0003/1-1/img/1182954083.jpg" width="100"/>',
    //サイズは余白ができるほど大きい値の場合、自動調整される。
    size: new google.maps.Size(200, 200)
  });
  //マーカーがクリックされたら、インフォウィンドウを表示するように設定する。
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  //表示するDIV要素を作成
  var controlDiv = createControl();
  //クリックされたときのイベントを登録
  google.maps.event.addDomListener(controlDiv, 'click', function() {
    map.setCenter(new google.maps.LatLng(34.809454, 135.532331))
  });
  //画面に表示
  map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(controlDiv);
}

function createControl(){
  var controlDiv = document.createElement('DIV');

  controlDiv.style.padding = '5px';
 
  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '太陽の塔';
  controlUI.appendChild(controlText);
  return controlDiv;
}

</script>

---