Javascriptista

Google Mapの各種コントロールはデフォルトで表示されていますが、カスタマイズ可能です。
SAMPLE








●STEP1・・・コントロールの表示有無、表示方法を設定する。
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);
  });
}

</script>

---

各種、コントロールに表示有無のプロパティが存在します。
・ナビゲーションコントロール
navigationControl: true
・マップタイプコントロール
mapTypeControl:true
・スケールコントロール
scaleControl:true

ナビゲーションコントロール、マップコントロールは表示スタイルに選択があります。
●ナビゲーションコントロール
google.maps.NavigationControlStyle.SMALL は、ミニズーム コントロールを表示します。これは + と - ボタンだけがあるものです。このスタイルは携帯端末に適しています。
google.maps.NavigationControlStyle.ZOOM_PAN は、Google マップで表示されるような、標準のズーム スライダ コントロールや移動 コントロールを表示します。
google.maps.NavigationControlStyle.ANDROID は、Android デバイスのネイティブの Map アプリケーションで使用されるような、小さなズーム コントロールを表示します。
google.maps.NavigationControlStyle.DEFAULT は、地図のサイズと地図を表示するデバイスに基づいて、適切なナビゲーション コントロールを選びます。

●マップコントロール
google.maps.MapTypeControlStyle.HORIZONTAL_BAR は、Google マップのように、コントロールを水平バーの中のボタンとして並べます。
google.maps.MapTypeControlStyle.DROPDOWN_MENU は、1 つのボタン コントロールのみを表示して、マップ タイプをドロップダウン メニューで選択できるようにします。
google.maps.MapTypeControlStyle.DEFAULT は、画面サイズに応じた「デフォルト」の設定に従って表示されます。API の将来のバージョンでは変更される可能性があります。




●STEP2・・・コントロールの表示位置を変更する。
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,
      position:google.maps.ControlPosition.BOTTOM_CENTER
    },
    //マップタイプコントロール
    mapTypeControl: true,
    mapTypeControlOptions:{
      style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position:google.maps.ControlPosition.LEFT_CENTER
    },
    //スケールコントロール
    scaleControl:true,
    scaleControlOptions:{
      position:google.maps.ControlPosition.RIGHT_CENTER
    }
  };
  //表示枠を指定
  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);
  });
}

</script>

---

位置の指定の種類は、google Map APIのチュートリアルに記載されています。