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> |
| ``` |
| ``` |
| ※余談ですが、地図がでなくなった場合などは、ブラウザのデベロッパーツールのコンソールにエラーがないか確認しましょう。 |
