「Google/Googlemap/js」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==googlemap貼り付けたい場所に== <div id="map-canvas"></div> ==jsコード== body閉じるタグの直前に。 (34.804618851, 135.345302589)の所には緯度...」) |
|||
| 行4: | 行4: | ||
==jsコード== | ==jsコード== | ||
body閉じるタグの直前に。 | body閉じるタグの直前に。 | ||
| − | + | <script src="https://maps.googleapis.com/maps/api/js?key=[apikey]"></script> | |
| − | + | <style> | |
| − | + | #map-canvas { | |
| − | + | width: 700px; | |
| − | + | height: 400px; | |
| − | + | } | |
| − | + | </style> | |
| − | + | <script type="text/javascript"> | |
| − | + | var map = new google.maps.Map(document.getElementById('map-canvas'), { | |
| − | + | center: new google.maps.LatLng(34.7019399, 135.51002519999997), | |
| − | + | zoom: 15 | |
| − | + | }); | |
| − | + | var marker = new google.maps.Marker({ | |
| − | + | position: new google.maps.LatLng(34.7019399, 135.51002519999997), | |
| − | center: new google.maps.LatLng(34. | + | map: map |
| − | + | }); | |
| − | + | var infoWindow = new google.maps.InfoWindow({ | |
| − | + | content: '<div class="sample">大阪</div>' | |
| − | + | }); | |
| − | + | marker.addListener('click', function() { | |
| − | + | infoWindow.open(map, marker); | |
| − | + | }); | |
| − | + | var marker2 = new google.maps.Marker({ | |
| − | + | position: new google.maps.LatLng(34.804618851, 135.345302589), | |
| − | + | map: map | |
| + | }); | ||
| + | infoWindow2 = new google.maps.InfoWindow({ | ||
| + | content: '<div class="sample">兵庫</div>' | ||
| + | }); | ||
| + | marker2.addListener('click', function() { | ||
| + | infoWindow2.open(map, marker2); | ||
| + | }); | ||
| + | </script> | ||
2016年8月4日 (木) 17:22時点における版
googlemap貼り付けたい場所に
jsコード
body閉じるタグの直前に。 <script src="https://maps.googleapis.com/maps/api/js?key=[apikey]"></script> <style>
- map-canvas {
width: 700px; height: 400px;
} </style> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(34.7019399, 135.51002519999997), zoom: 15
}); var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.7019399, 135.51002519999997), map: map
}); var infoWindow = new google.maps.InfoWindow({
content: '大阪
'
}); marker.addListener('click', function() {
infoWindow.open(map, marker);
}); var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(34.804618851, 135.345302589), map: map
}); infoWindow2 = new google.maps.InfoWindow({
content: '兵庫
'
}); marker2.addListener('click', function() {
infoWindow2.open(map, marker2);
}); </script>
