回答編集履歴

1 補足

popobot

popobot score 6057

2017/01/12 17:15  投稿

組み合わせてやったら普通にできましたよ
※APIキーだけ埋めればそのまま動くはずです。
```html
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=APIキー"></script>
</head>
<body>
<div id="wrap-a-1"></div>
<script type="text/javascript">
 (function(){
   var latlng = new google.maps.LatLng(34.611548, 135.504877);
   var myOptions = {
       zoom: 15
     , center: latlng
     , streetViewControl: false
     , mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map_01 = new google.maps.Map(
       document.getElementById("wrap-a-1")
     , myOptions
   );
   var data = new Array();
   data.push({
     lat: 34.611548, //緯度
     lng: 135.504877, //経度
     url: 'http://google.com' //リンク先
   });
   //マーカーを配置するループ
   for (i = 0; i < data.length; i++) {
     var markers = new google.maps.Marker({
     position: new google.maps.LatLng(data[i].lat, data[i].lng),
     map: map_01
   });
   //クリックしたら指定したurlに遷移するイベント
   google.maps.event.addListener(markers, 'click', (function(url){
     return function(){ location.href = url; };
   })(data[i].url));
 }
}());
</script>
</body>
<style>
#wrap-a-1 {
 position: absolute;
 width: 400px;
 height: 200px;
}
</style>
```
```
※余談ですが、地図がでなくなった場合などは、ブラウザのデベロッパーツールのコンソールにエラーがないか確認しましょう。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る