googleマップにマーカーしてメッセージを付ける

googleマップにマーカーしてメッセージを付けるサンプル

<div id="map" style="width: 400px; height: 280px;"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript">
var data = {
   "1":{ "A":"①地点です", "M":"35.001", "N":"139.001" }
  ,"2":{ "A":"②地点です", "M":"35.002", "N":"139.002" }
  ,"3":{ "A":"③地点です", "M":"35.003", "N":"139.003" }
};

function attachMessage(marker, msg) {
  google.maps.event.addListener(marker, 'click', function ($) {
    new google.maps.Geocoder().geocode({
      latLng: marker.getPosition()
    }, function(result, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        new google.maps.InfoWindow({
          content: msg
        }).open(marker.getMap(), marker);
      }
    });
  });
}

var myMap = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: new google.maps.LatLng(35, 139),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

for ( var i in data ) {
  var myMarker = new google.maps.Marker({
    position:  new google.maps.LatLng(data[i]["M"], data[i]["N"]),
    map: myMap,
  });
  attachMessage(myMarker, data[i]["A"]);
}
</script>

タブのサンプル

tabのサンプルです。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

<script>
  $(function() {
    $("#tabhoge").tabs();
  });
</script>

<div id="tabhoge">
    <ul>
      <li><a href="#t-1">タブ1</a></li>
      <li><a href="#t-2">タブ2</a></li>
      <li><a href="#t-3">タブ3</a></li>
    </ul>

    <div id="t-1">コンテンツ1</div>
    <div id="t-2">コンテンツ2</div>
    <div id="t-3">コンテンツ3</div>
</div>