「index.html」の
に以下を追加<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
「index.html」の
に以下を追加 <script>
function initialize() {
//緯度と経度の配列
var data = new Array();
data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅'});
var myLatlng = new google.maps.LatLng(data[0].lat, data[0].lng);
var opts = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),opts);
//複数のマーカーを配列に整理
var markers = new Array();
//マーカ-の作成
for (i = 0; i < data.length; i++) {
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: map
});
//マーカーに使うアイコンの指定
markers[i].setOptions({
icon: {
url: 'https://2.bp.blogspot.com/-9HsZ98OdwYg/Vtof8pIYl-I/AAAAAAAA4bI/udf_7qhu-6o/s180-c/train_eki_building.png',
scaledSize: new google.maps.Size( 30 , 30 ),
}
});
dispInfo(markers[i],data[i].name);
}
}
function dispInfo(marker,name) {
google.maps.event.addListener(marker, 'click',
function(event) {
new google.maps.InfoWindow
({content:name}).open(marker.getMap(), marker);
});
}
</script>
<!-- 地図のリンク -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
「src/pages/home/home.html」に以下を追加
<body onload="initialize()">
<div id="map_canvas" style="width:1000px; height:600px"></div>
</body>
