<div id="google_map" class="google-map"></div>
<script src="//maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script>
function googleMap() {
var latlng = new google.maps.LatLng(35.6804722,139.7676504); /* 座標 */
var myOptions = {
zoom: 16, /* 拡大比率 */
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('google_map'), myOptions);
var markerOptions = {
position: latlng,
map: map,
title: '株式会社サンプル', /* タイトル */
animation: google.maps.Animation.DROP /* アニメーション */
};
var marker = new google.maps.Marker(markerOptions);
/* 取得スタイルの貼り付け */
var styleOptions = [
{
"stylers": [
{ "hue": '#c4b564' }
]
}
];
var styledMapOptions = { name: '株式会社サンプル' } /* 地図右上のタイトル */
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>