2016年04月08日

Google Maps APIを使ってみた

blogramランキング参加中!

Google Maps APIプログラミング入門 改訂2版

中古価格
¥2,800から
(2016/4/8 23:26時点)



最近js書くようになったので
たまにはアプリじゃなくてwebサービス作ってみようかと思った

js使うなら地図サービスだよねと思って
Google Maps APIの調査してみた
以下、最初の一歩

・地図の表示
optionでパラメータ与えると色々できる
var latlng = new google.maps.LatLng(35.609984,139.810703);
var opts = {
zoom: 11, //拡大縮小
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControl : true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);


・マーカーの表示
var lat = new google.maps.LatLng(35.632605,139.88132);
var marker = new google.maps.Marker({
position: lat,
map: map
});


・マーカーの動的な表示
marker.setMap(map);


・マーカーの動的な非表示
marker.setMap(null);


・マーカークリック時に情報ウインドウの表示
var html = "<a href=\"http://www.yahoo.co.jp\">yahoo%lt;/a>";
var infowindow = new google.maps.InfoWindow({
content: html
});
marker.addListener('click',
function openHakodateyama() {
infowindow.open(map, marker);
});


・情報ウインドウを閉じる
infowindow.close();


・マーカーにアイコンの設定
var icon = new google.maps.MarkerImage(
\"img.png\",
new google.maps.Size(50,20)
);
var marker = new google.maps.Marker({
position: lat,
map: map,
icon: icon,
});


これで地図の操作は大体できるかと思います。
ちょっとこれで簡単なサービス作ってみようかな
続く

・公式ページ
https://developers.google.com/maps/documentation/javascript/examples/?hl=ja
タグ:javascript
posted by マスタカ at 23:28 | Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック