東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

googlemapのデザイン

①headタグに以下を記述

<script src="http://maps.google.com/maps/api/js?sensor=true">
</script>

②googlemapを表示させるところにhtmlを記述。bodyタグのところはbodyタグのところに必ず以下のコードをかく。

<body onload="initialize();">
<div id="map_canvas" style="width:100%;height:500px;"></div>


③mapstyle.jsを以下のように記述。スタイルのところは「Styled Map Wizard」で生成したものを貼り付ける。

function initialize() {
  var latlng = new google.maps.LatLng(座標);
  var myOptions = {
    zoom: 18,/*拡大比率*/
    scrollwheel: false,
    center: latlng,/*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  /*アイコン設定▼*/
  var icon = new google.maps.MarkerImage('ここにマーカーとなる画像のパス',
    new google.maps.Size(90,107),/*アイコンサイズ設定*/
    new google.maps.Point(0,0)/*アイコン位置設定*/
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '株式会社ABC'
  };
  var marker = new google.maps.Marker(markerOptions);
 /*アイコン設定ここまで▲*/ 


  /*取得スタイルの貼り付け*/
  var styleOptions = [
  {
    "stylers": [
      { "weight": 0.1 },
      { "saturation": -50 },
      { "hue": "#00ff6f" },
      { "lightness": 21 }
    ]
  }
];
  var styledMapOptions = { name: '株式会社ABC' }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');
}


【参考URL】

http://liginc.co.jp/web/service/other-service/62242