GoogleMAPにお店のロゴを入れる方法
地図を入れるときに便利なGoogleMAPですが、オリジナリティも出しにくく、非常にそっけないものになりがちです。
そこで、GoogleMAP上にお店のロゴを入れてみてはどうでしょうか。
実際はこんな感じです。
下に記しますが、一回ファイルを作っておくと便利です。
【ソース内で変更する際のポイントは次の６箇所】
１．APIキーの変更
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAATvmcoNxIFQTo0fPmX8EkM
BQ3vTC2sQDnDgHCmPh5gXgTSBcA
QRTd_rLbab2vhFMu2xs3jVhvshHK6A"
のKye="ABQIA･･･････" を各サイトごとのAPIkey に変更します。
cf.APIkeyの取得は下記のサイトから (要GoogleID)
http://code.google.com/apis/maps/signup.html
２．地図サイズの変更
<div id="map" style="width:720px; height:370px">
↑width、height をご希望の大きさに
３．ロゴを配置する座標を変更
var point = new GLatLng(34.674423, 135.502282);
ロゴを配置する緯度と経度を変更します。
cf.住所から、緯度と経度を割り出すには下記のサイトが便利です。
http://www.geocoding.jp/
４．地図の中心と、拡大度を変更
map.setCenter(new GLatLng(34.674423, 135.502282), 15);
通常はロゴの位置と一緒でOK。
末尾の15を上げるとさらに拡大します。
５．アイコンの変更
icon.image = "http://make-smile.sakura.ne.jp/img/map.gif";
icon.iconSize = new GSize(100, 60);
画像を作って、直パスを指定すればＯＫ。
サイズはwidth、height を指示する。
６．吹き出しの内容を変更する。
map.openInfoWindowHtml(map.getCenter(),
"make smile
TEL:06-6245-0394");
" "の中にHTMLで記述ができます。
-------------------------------------------------------------
以下 ソースの例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAATvmcoNxIFQTo0fPmX8
EkMBQ3vTC2sQDnDgHCmPh5gXgTSBcAQRT
d_rLbab2vhFMu2xs3jVhvshHK6A"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:720px; height:370px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(34.674423, 135.502282);
map.setCenter(new GLatLng(34.674423, 135.502282), 15);
var icon = new GIcon();
icon.image = "http://make-smile.sakura.ne.jp/img/map.gif";
icon.iconSize = new GSize(100, 60);
icon.iconAnchor = new GPoint(0, 0);
var markeropts = new Object();
markeropts.icon = icon;
var marker = new GMarker(point, markeropts);
map.addOverlay(marker);
map.openInfoWindowHtml(map.getCenter(),
"make smile<br> TEL:06-6245-0394");
map.addControl(new GSmallMapControl());
}
//]]>
</script>
</body>
</html>
- by Afro
- at 2009年01月28日
コメント