Google Maps APIキーを取得してカスタマイズ

Posted on by

Google Maps APIキーがないと表示されないと騒いでる人がいたので記事を書くことにしました。

私はちょうど変更のあった2016年10月12日のすぐ後に表示できない(((( ;ﾟдﾟ))))ｱﾜﾜﾜﾜに遭遇し速攻で解決。

Gogole mapのズームの設定、色、マーカーを画像に変更、Clickで住所などを表示、を設定していきます。

まず、Google map APIキーの取得は
Google Maps API ウェブ向け ←から　[キーを取得]

おおよそは[プロジェクトを作成]でOK

認証情報で、名前をつけ、[HTTP リファラー（ウェブサイト）]を選択し、使用するウェブサイトのURLを入力。

キーを取得したら、表示させたい頁のHTMLやPHPファイルの
<head>内もしくは </body>ぼでぇ終了タグ前に

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=（取得したAPIキー）&signed_in=true&callback=initMap"></script>
<script>

を挿入

設定に必要なjsを記載していきます。

私はmap.jsなど別ファイルにしてリンクしていますが、リンクじゃなくても問題はないかと

基本は、

     
function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 緯度, lng: 経度},
          scrollwheel: false, //ページスクロールのときMapが拡大しないようにとか
          zoom: 8　//ズーム設定
        });
      }

緯度経度の求め方は、Gogole mapで設定したい位置で右クリック「この場所について」を選択すると、下にpopがでて住所の下にでてる数字になります。緯度,経度

スタイルの設定など
参考:developers公式のやつ https://developers.google.com/maps/documentation/javascript/
を参考にしながら

 var styles = {

したいスタイル設定を行います。
（なんかいろいろできそうだけどありすぎるので割愛）

マーカーを画像に変更とマーカーClickで住所表示
（他の書き方あるかもで自信ないけど）
function initMap() {}　の中にかきます。

var image = '../images/company/marker.png'; //画像のありか
  var beachMarker = new google.maps.Marker({
    position: {lat: 緯度, lng: 軽度},
    map: map,
    icon: image,
	
  });
  
   var contentString = '<div id="bodyContent">'+
      '<strong>会社の名前とか店の名前とか</strong>' +
      '<p>住所を記載しておく</p>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });


  beachMarker.addListener('click', function() {
    infowindow.open(map, beachMarker);
  });

で、動作しました。

（2016年10月、11月の時点です。）