16051501 google Maps API V3に対応したgmaps.jsを使えば簡単にgoogleマップをカスタマイズできるのでオススメです!
ちょっと前まではAPI Keyが必要だったりと、なかなか導入も面倒だったようですが本当に簡単に出来ちゃいます。
使用制限と購入 – Google Maps JavaScript API v3 — Google Developers
※ただし使用制限もあります

今回行うgoogleマップのカスタマイズは3点!

指定した緯度経度に任意の画像を設置

14072402デモはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option.js"></script>
</head>
<body>
  <div id="demo">
    <div id="access">
      <div id="map"></div>
    </div>
  </div>
</body>
</html>

$(document).ready(function(){
  var map;
  map = new GMaps({
    div: "#map01",
    lat: 35.694140,
    lng: 139.689525,
    zoom: 15,
  });

  map.addMarker({
    lat: 35.694140,
    lng: 139.689525,
    title: "てんとう虫",
    icon: "img/ladybird.png",
    infoWindow: {
      content: "<p>てんとう虫 : 「やほー!」</p>"
    }
  });

});
jsにmapの緯度と経度、zoomレベルを指定。
マーカーにも同じく緯度と経度を指定し、アイコンの画像指定とオンマウス時のテキスト表示の指定です。
infoWindowはクリック時のテキストになります。
なんて簡単、素敵( ˘ω˘)


指定した2つの緯度経度に任意の画像を設置し、ルート表示

14072403デモはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option2.js"></script>
</head>
<body>
  <div id="demo">
    <div class="access">
      <div id="map02"></div>
    </div>
  </div>
</body>
</html>

$(document).ready(function(){
  var map;
  map = new GMaps({
    div: "#map02",
    lat: 35.694140,
    lng: 139.689525,
    zoom: 15,
  });

  map.drawRoute({
    origin: [35.694463, 139.692605],
    destination: [35.694140, 139.689525],
    travelMode: 'walking',
    strokeColor: '#2ecc40',
    strokeOpacity: 0.8,
    strokeWeight: 4
  });

  map.addMarker({
    lat: 35.694140,
    lng: 139.689525,
    title: "てんとう虫",
    icon: "img/ladybird.png",
    infoWindow: {
      content: "<p>てんとう虫 : 「やほー!」</p>"
    }
  });

  map.addMarker({
    lat: 35.694463,
    lng: 139.692605,
    title: "西新宿駅",
    infoWindow: {
      content: "<p>西新宿駅</p>"
    }
  });
});
地図の指定、ルートの指定、マーカー2つの指定になります。
これも簡単にカスタマイズできますね( ˘ω˘)


指定した緯度経度に任意の画像を設置して吹き出しを常に表示

14072404 これも結構需要ありそうですよね。
デモはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option3.js"></script>
</head>
<body>
  <div id="demo">
    <div class="access">
      <div id="map03"></div>
    </div>
  </div>
</body>
</html>

$(document).ready(function(){
  var map = new google.maps.Map(
  document.getElementById("map03"),{
  zoom : 15,
  center : new google.maps.LatLng(35.694140, 139.689525),
  mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  );
  var marker = new google.maps.Marker({
  position: new google.maps.LatLng(35.694140, 139.689525),
  icon: "img/ladybird.png",
  map: map
  });
  var infowindow = new google.maps.InfoWindow({
  content: "<p>てんとう虫 : 「やほー!」</p>"
  });
  infowindow.open(map, marker);
});


デモ用のcss

@charset "utf-8";

/* =================================
   @DEMO
================================= */
#demo {
  margin: 70px auto;
  width: 620px;
}

/* =================================
   @ACCESS
================================= */
.access {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  margin-bottom: 30px;
}

/* =================================
   @MAP
================================= */
.map {
  height: 340px;
}
.map p {
  margin: 1px;
  white-space:nowrap;
}



おわりに

googleマップのカスタマイズ、結構使う場面も多いのではないでしょうか。
他にもデザインの変更やスマホ用に現在地の取得、ルート検索など様々なマップも作成可能のようなのでサイトに合わせたアクセスマップも簡単に作れそうです。
是非とも導入してみてください( ˘ω˘)

参考にさせていただきました!

最初からマーカー上に情報ウィンドウ(ふきだし)を表示する

gmap V2 終了!真っ白になったグーグルマップはすぐにバージョンアップを![API]新google map api v3でサイトに地図を表示するデモ。 | BENNO9

この記事を書いた人

きどっち
きどっち
webデザイン担当。
起きてる時間はPCかスマホの画面を見ています。
ゲームも色々やってます。

でも視力は抜群です(^ν^)