<img src="http://maps.google.com/staticmap?center=35.65850141607581,139.7011747956276&markers=35.65860602292687,139.70132499933243,reda%7C35.65849051952097,139.7011747956276,blueb%7C35.65831399512499,139.70127671957016,greenc&zoom=19&size=250x250&key=ABQIAAAA_iSp5UUIYg3m7SbnZl8CcBQi8DWPuIzniDJ5IGjUnokhGPMCUBTueIEBLrFcw2hnEybtyYnHqTdFgw" alt="Googleマップをカンタンに画像貼り付けできるようになった" />
<p>近頃マップを手軽に作れる<a href="http://web-marketing.zako.org/web-service/">WEBサービス</a>がいろいろと出てきている中、<a href="http://web-marketing.zako.org/google/google-map/">Googleマップ</a>も簡単かつ表示の軽さを求めて画像を生成するサービスを始めたみたいです。</p>

<!--more-->
<h3 class="tips">カスタマイズも意外とカンタンなGoogleマップの画像</h3>
<p class="picture"><img src="http://maps.google.com/staticmap?center=35.66524609822095,139.7182846069336&markers=35.662836,139.731443,redr%7C35.65799363503939,139.70163345336914,blues%7C35.672358451082985,139.72394943237305,greena&zoom=13&size=400x250&key=ABQIAAAA_iSp5UUIYg3m7SbnZl8CcBQi8DWPuIzniDJ5IGjUnokhGPMCUBTueIEBLrFcw2hnEybtyYnHqTdFgw" alt="六本木、渋谷、青山の三角形" />六本木、渋谷、青山の3箇所にマーカーをつけてみたGoogleマップの画像</p>
<p>APIとか聞いて引いてしまう人もコツさえ掴めば意外と簡単にカスタマイズできてしまうシンプルさ。自分でいじってみるいい機会かもしれません。</p>

<h3 class="tips">API初心者用リファレンス</h3>
<p>私と同様「APIなんざあまり分からん」という人向けのものをご紹介。今すぐ自分で試したいという方は、画像をすぐに生成できる<a rel="nofollow" class="google" href="http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html" onclick="window.open('http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html'); return false;">Static Maps Wizard</a>か、開発者向けガイド<a rel="nofollow" class="google" href="http://code.google.com/apis/maps/documentation/staticmaps/#Audience" onclick="window.open('http://code.google.com/apis/maps/documentation/staticmaps/#Audience'); return false;">Google Static Maps API</a>へどうぞ。</p>
<h4 class="tips">生成コードを分解</h4>
<p><a class="web-site-link" href="http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html" onclick="window.open('http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html'); return false;">Static Maps Wizard</a>で生成されるコードは下記のとおり。（※サイトに貼り付けるときはimgタグと組み合わせます。）</p>
<textarea name="code" class="xml" cols="60" rows="10" id="code">http://maps.google.com/staticmap?center=35.66524609822095,139.7182846069336&markers=35.672358451082985,139.72394943237305,red&zoom=13&size=400x250&key=「あなたのAPI key」</textarea>
<p>このコードを分解してみると下記のようになります。</p>
<textarea name="code" class="xml" cols="60" rows="5" id="code">
http://maps.google.com/staticmap?
center=「 中心部の座標 」
&
markers=「 マーカーを表示する緯度」,「マーカーを表示する経度」,「マーカーの色：red,blue,green」「マーカーに表示するアルファベット：a~z 」
&
zoom=「 ズームレベル：0～19 」
&
size=「 画像サイズ：幅x高さ 」
&
key=「 あなたのAPI key 」
</textarea>
<p>各項目を「 & 」でつなげていく感じですね。ちなみにこの記事中のマップにあるような複数のマーカーを表示させるためには、「 markers= 」の部分が下記のサンプルのようになります。</p>
<textarea name="code" class="xml" cols="60" rows="5" id="code">
markers=35.662836,139.731443,redr%7C35.65799363503939,139.70163345336914,blues%7C35.672358451082985,139.72394943237305,greena
</textarea>
<p>ちなみに「 %7C 」は「 | （パイプ）」をURLエンコードしたものですので、それぞれのステータスを「 | 」で区切ればいいということになります。<br />それぞれの経度緯度を出したいときは<a class="google" href="http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html" onclick="window.open('http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html'); return false;">Static Maps Wizard</a>の設定用マップのマーカーを動かせば、生成されるURLへ自動的に反映されます。</p>
<h4 class="tips">サイトに貼り付ける最終形のサンプルコード</h4>
<p>そんなこんなでできたサイト貼り付け用のサンプルコードが下記コードになります。</p>
<textarea name="code" class="xml" cols="60" rows="5" id="code"><img src="http://maps.google.com/staticmap?center=35.66524609822095,139.7182846069336&markers=35.662836,139.731443,redr%7C35.65799363503939,139.70163345336914,blues%7C35.672358451082985,139.72394943237305,greena&zoom=13&size=400x250&key=ABQIAAAA_iSp5UUIYg3m7SbnZl8CcBQi8DWPuIzniDJ5IGjUnokhGPMCUBTueIEBLrFcw2hnEybtyYnHqTdFgw" /></textarea>
<p>こういったやり方をしていると分からなくてもはまって来ますｗｗ　ある意味謎解きみたいな感覚ですよね。 そして今日の個人的トリビアは、「API keyってサブドメインで使う場合、URL登録時に「 www 」を外しておけば全部共通で使えるんだ。」です。 恥ずかしながら気づいてなかったｗｗ</p>

<h4 class="tips">関連情報</h4>
<ul>
<li>Via：<a class="google" href="http://googlemapsapi.blogspot.com/2008/02/google-maps-without-scripting.html" onclick="window.open('http://googlemapsapi.blogspot.com/2008/02/google-maps-without-scripting.html'); return false;">Official Google Maps API Blog</a></li>
<li><a class="google" href="http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html?generated=1&amp;mapWidthTEXT=400&amp;mapHeightTEXT=250&amp;mapZoom=13&amp;markerPointLat=35.662836&amp;markerPointLng=139.731443&amp;url=http://zako.org/&amp;key=ABQIAAAA_iSp5UUIYg3m7SbnZl8CcBQi8DWPuIzniDJ5IGjUnokhGPMCUBTueIEBLrFcw2hnEybtyYnHqTdFgw" onclick="window.open('http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html?generated=1&amp;mapWidthTEXT=400&amp;mapHeightTEXT=250&amp;mapZoom=13&amp;markerPointLat=35.662836&amp;markerPointLng=139.731443&amp;url=http://zako.org/&amp;key=ABQIAAAA_iSp5UUIYg3m7SbnZl8CcBQi8DWPuIzniDJ5IGjUnokhGPMCUBTueIEBLrFcw2hnEybtyYnHqTdFgw'); return false;">Static Map Wizard</a></li>
</ul>

<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>