X_NOTE: 6月 2014

2014年6月9日月曜日

google maps マーカーとスタイルオリジナルに変更まとめ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>google maps sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
 
  styles: 

[
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "invert_lightness": true },
      { "saturation": 1 },
      { "visibility": "on" },
      { "color": "#c9e280" }
    ]
  },{
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      { "color": "#f6e7d0" }
    ]
  },{
    "featureType": "poi.business",
    "elementType": "geometry",
    "stylers": [
      { "color": "#faf4e3" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      { "color": "#e7e2a5" }
    ]
  },{
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      { "color": "#faf4e3" }
    ]
  }
]

  };
  
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* アイコン設定 */
var icon = new google.maps.MarkerImage('google_pin.png',
  new google.maps.Size(62,54),
  new google.maps.Point(0,0),
  new google.maps.Point(23,54)
);
  var markerOptions = {
  position: latlng,
  map: map,
  icon: icon,
  title: '東京駅'
};
var marker = new google.maps.Marker(markerOptions);

}
</script>
</head>

<body onload="initialize();">
<div id="map_canvas" style="width:700px;height:280px;">
</div>
</body>
</html>

サンプル

参考サイト
・geocoding
住所から緯度経度を調べられる

・Google Maps API Styled Map Wizard - gmaps-samples-v3
googlemapの見た目を変えるJSONコードを書き出す。

・Googleマップをイラストマップみたいにしたい。
・Webサービス Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。

登録: 投稿 (Atom)