Google Maps(v3)で複数のマーカーを異なる画像で異なる吹き出しを表示してオリジナルのサイドバーを使う場合

【その1】

• マーカーは1つ
• マーカーはオリジナルの画像
• クリックすると吹きだしを表示

これがクライアントから求められる最もシンプルなものかなと思います。

function initialize() {
    var Latlng = new google.maps.LatLng(34.654092,135.516401);  //▲画面の中心(必須)
    var Options = {
      zoom: 14,
      center: Latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), Options);
    var infowindow = new google.maps.InfoWindow({
        content: '通天閣です。大阪の象徴'     //▲吹きだしの内容
    });
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(34.652553,135.506333),  //▲マーカーの位置(必須)
    icon: 'img/marker.png',  //▲マーカー画像(必須)
    shadow: 'img/shadow.png',  //▲マーカー影画像
    title: '通天閣',  //▲マーカーの名前(マーカーの上にマウスが乗ったときに表示されます)
    map: map
	});  
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
  });

}

▲がついた部分を変更するだけで使えるようになりますが、マーカーの画像や吹き出しの内容を個別に設定していく形です。

実際の表示サンプルはこちらをクリック

これでクライアントの所在地地図などはできてしまうかと思います。

複数のマーカーを異なる画像で異なる吹き出しを表示してオリジナルのサイドバーを使う(有料版)

ひとつのマーカーだけならいいのですが、複数のマーカーを表示させ、しかもそれぞれのマーカーが別の画像で、別の吹き出しで表示させる場合には複雑になります。

またよく求められるのが地図の外にリンクを用意して、そのリンクをクリックすると地図上のマーカーを中心に持ってきて吹き出しを表示させるというものをここ数ヶ月で5つくらい相談されました。どのようなものかは動画にて

見難いのはお許しを・・・

JavascriptのソースはPHPなどでデータベースから情報であっても導入しやすいような形にしています。

【有料版でできること】

• いくつでもマーカーは増やせます
• マーカーの画像(アイコンと影)はマーカーごとに設定
• マーカーごとの吹き出し設定(htmlのタグ使用可能)
• 地図の外のリンクで、それぞれの対応したマーカーをクリックしたのと同じ動きを
• GoogleMapsの基本的な設定(地図、スクロール等)は当然自由

【価格と購入ページ】

価格は5,000円です。現在のデザイナーさんの時給を考えると2時間もかけてこの設定を自分で作ってしまうと損しちゃうのでささっと購入したほうがいいような値段にしました。

万一設定方法がわからなかった場合に備えて、専用のメールアドレスをファイルに添付してますので、設定に関する質問は購入していただいた方にお答えします。

購入ページはこちらです