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