chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/12/09

[JS]Google Maps Javascript API v3のサンプルを作成してみました

普段の案件でGoogle Mapsをよく使用するのですが、iframeでの埋め込みが殆どです。ですが、ある案件にてGoogle Mapsのカスタマイズをしたので、その際に使用したコードと他のサンプルコードを書きました。参考になれば幸いです!

Google Maps Javascript API v3

店舗情報などで、Google Mapsを使用するのが多いかと思います。

基本的な案件はiframeでの埋め込みで済む事が多いのですが、新Google MapsになってからiframeのURLが変わり、アイコンの表示/非表示、コントロール等のカスタマイズが現状わからない状態です。

※もしどなたかiframeのGoogle Mapsのちょっとしたカスタマイズ知ってるよって方は是非Twitterで教えて頂けるとすごい嬉しいです

Google Mapsにマーカーのアイコンの変更、複数マーカーの設置をするにはJavascriptでのAPIを使用していきます。

v2の頃からは大きく進化しているようです。

サンプルを作ってみました

実際に案件で使用したので、そのままの勢いでいくつかのサンプルを作成してみました!

Google Maps Demo

基本設定

サンプルページにも記載していますが、基本的にはAPIキーを取得した方がいいので、まずはGoogleアカウントを取得し

Google MapsのAPIキーを取得します。

JSの読み込み

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&v=3.10&sensor=true"></script>

Mapの初期設定

<script type="text/javascript">
function initialize() {
 var latlng = new google.maps.LatLng(35.681626, 139.766073);

 mapOptions = {
  zoom: 14,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false,
  mapTypeControl: false,
  navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
  }
 };

 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

 var marker = new google.maps.Marker({
  position: latlng,
  map: mapSec,
  title:"東京駅"
 });
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize',function(){ map.panTo(mapOptions.center); });
</script>

HTML

<div id="map_canvas" style="width:100%; height:350px;"></div>

基本の設定はこのような形です。

サンプルでは、マーカーの複数設置や、マーカークリックで開く情報ウインドウ のコードを載せています。

参考になれば、幸いです。

 

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加