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