Googleマップを埋め込み、カスタマイズする方法｜ケーワンプラス

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

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

1 指定した緯度経度に任意の画像を設置
2 指定した2つの緯度経度に任意の画像を設置し、ルート表示
3 指定した緯度経度に任意の画像を設置して吹き出しを常に表示
4 おわりに

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

→デモはこちら

<!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つの緯度経度に任意の画像を設置し、ルート表示

→デモはこちら

<!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つの指定になります。
これも簡単にカスタマイズできますね( ˘ω˘)

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

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

<!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;
}