Google Maps APIで地図とピンの表示

高瀬 裕介 290views 更新:2015年5月25日

まずは必要なライブラリの読み込み

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("maps", "3", {'other_params':'sensor=false'});</script>

地図を表示させる用のDIVタグを追加

<div id='map-canvas'></div>

スクリプトはこんな感じ

//ピンを置く座標の指定
var latlng = new google.maps.LatLng({緯度}, {経度});

//地図の設定
var mapOptions = {
  zoom: 6,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

//地図の初期化(ここまでで地図表示)
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//マーカー設置
var marker = new google.maps.Marker({
                position: latlng,
                map: map, 
                title: "title"
            });

サンプル(入力されたIPのロケーション表示)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません