今回は、埋め込んだGoogle Mapの色やアイコンなどの、デザインの変更について書きます。

まずは手っ取り早くサイトに表示させてしまいましょう！

Googleマップを導入するにはGooglemapAPIを使います。まずは、下記の記述をします。 場所はhead内でも良いですし、/body前でもお好みで。

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

次に「ｊｓを記載」

function googleMap() {
var latlng = new google.maps.LatLng(36.508454, 139.863546);/* 座標 */
var myOptions = {
zoom: 16, /*拡大比率*/
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '株式会社ジップサービス',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#003366' }
]
}
];
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>

次に、地図を表示したい箇所に下記を追加↓

<div id="map" style="width:600px; height:400px; margin:0 auto;"></div>

するとこのような感じで表示されるかと思います。

変更箇所について

まずは座標を入力します。

var latlng = new google.maps.LatLng(36.508454, 139.863546);/* ここをご自身の座標に */

次にアイコンを取得

var icon = new google.maps.MarkerImage('/icon.png',/*画像urlを記載します*/

タイトルを入力

title: '株式会社ジップサービス',/*タイトル*/
とか
var styledMapOptions = { name: '株式会社ジップサービス' }/*地図左上のタイトル*/

スタイルの設定

var styleOptions = [
{
"stylers": [
{ "hue": '#003366' }
]
}
];

ここの部分でスタイル（色など）を指定しています。

スタイルの作成方法は,
google mapデザインカスタマイズコード生成ツール
がとても便利です。

まとめ

以上ざっとですが方法について説明いたしました。

スタイルの設定例は、検索すればネット上にいっぱいありますので、色々と試してみてください。