facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
 
(同じ利用者による、間の3版が非表示)
行1: 行1:
 +
==APIキー取得==
 +
https://console.developers.google.com
 +
#"Google Maps JavaScript API "を選択しAPIを有効にする
 +
#認証にブラウザキーを選択
 +
#使用するサイトのドメインを登録する
 +
 
==googlemap貼り付けたい場所に==
 
==googlemap貼り付けたい場所に==
 
  <div id="map-canvas"></div>
 
  <div id="map-canvas"></div>
行32: 行38:
 
  });
 
  });
 
  infoWindow2 = new google.maps.InfoWindow({
 
  infoWindow2 = new google.maps.InfoWindow({
     content: '<div class="sample">兵庫</div>'
+
     content: '<nowiki><</nowiki>div class="sample">兵庫</div>'
 
  });
 
  });
 
  marker2.addListener('click', function() {
 
  marker2.addListener('click', function() {
行38: 行44:
 
  });
 
  });
 
  </script>
 
  </script>
 +
 +
==画像アイコン==
 +
https://www.softel.co.jp/blogs/tech/archives/4726

2016年8月7日 (日) 22:36時点における最新版

APIキー取得

https://console.developers.google.com
  1. "Google Maps JavaScript API "を選択しAPIを有効にする
  2. 認証にブラウザキーを選択
  3. 使用するサイトのドメインを登録する

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>

画像アイコン

https://www.softel.co.jp/blogs/tech/archives/4726