こちらの記事では、下図のようにお店の場所をGoogleマップで埋め込んでいます。
Googleマップサイトで住所を検索した時に生成される、iframe埋め込みタグをそのまま設置するのはなんだか味気ないなと思ってWordPress Plugin: Google Maps v3 Shortcodeを使用して、埋め込みとマーカーをカスタマイズしてみました。
マーカーはデフォルトだと赤いピンですが、それをオリジナルの画像にすることができます。マーカーに影があると、マーカーが実際に地図上に立っているような立体感が演出できます。
WordPress Plugin: Google Maps v3 Shortcodeプラグインは、マーカー画像の指定はできたのですが、マーカーの影画像を設定する部分がなかったので、Google-Maps-v3-Shortcode.php内の下記の2箇所をちょこっと変更しました。
[php title=”25行目あたり”]
// マーカー画像（marker.png）、マーカー影画像（marker-shadow.png）のパスは、
// テンプレートフォルダのimagesフォルダ内に入れた場合の例です。
$attr = shortcode_atts(array(
・・・
‘markerimage’ => get_bloginfo(‘template_directory’).’/images/marker.png’,
‘markerimageshadow’ => get_bloginfo(‘template_directory’).’/images/marker-shadow.png’,
・・・
[/php]
[php title=”170行目あたり”]
・・・
if ($attr[‘marker’] !=”)
{
//add custom image
if ($attr[‘markerimage’] !=”)
{
$returnme .= ‘var image = “‘. $attr[‘markerimage’] .'”;’;
}
//マーカー用の影画像を追加
if ($attr[‘markerimageshadow’] !=”)
{
$returnme .= ‘var shadow = “‘. $attr[‘markerimageshadow’] .'”;’;
}
$returnme .= ‘
var marker = new google.maps.Marker({
map: ‘ . $attr[‘id’] . ‘,
‘;
if ($attr[‘markerimage’] !=”)
{
$returnme .= ‘icon: image,’;
}
//追加
if ($attr[‘markerimageshadow’] !=”)
{
$returnme .= ‘shadow: shadow,’;
}
・・・
}
[/php]
記事に埋め込むときは、下記のようにaddressに住所を指定します。ズームレベルはzに指定します。
※［］は全角にしていますが、実際に埋め込むときは半角で。
[html]
お店の場所はここだよ♪
［map id=”map326″ z=”16″ address=”神奈川県川崎市高津区溝口1-12-8″ marker=”yes”]
[/html]
緯度経度で指定したい場合は、addressではなく、lat、lngで指定します。
[html]
お店の場所はここだよ♪
［map id=”map326″ z=”16″ lat=”35.600523″ lng=”139.612459 marker=”yes”]
[/html]
マーカー画像は、Google Map Custom Marker Makerを使って生成しました。このジェネレーターを使えば、マーカー用の画像をアップするだけで、アップした画像から、マーカーの影画像を一瞬で生成してくれるし、マーカーをカスタマイズしたGoogleマップの埋め込みコード一式をZIPファイルでダウンロードできちゃいます。
| マーカー画像 marker.png | マーカーの影画像 marker-shadow.png |
|---|---|
 |
 |
