facebook twitter hatena line email

「Google/Googlemap/js」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(jsコード)
行4: 行4:
 
==jsコード==
 
==jsコード==
 
body閉じるタグの直前に。
 
body閉じるタグの直前に。
 +
 +
<nowiki>
 
  <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>
行37: 行39:
 
  });
 
  });
 
  </script>
 
  </script>
 +
 +
</nowiki>

2016年8月4日 (木) 17:23時点における版

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: '<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>