Google mapで複数プロットしたり、マーカーを変えたり、吹き出しからリンクさせたり・・もろ

たとえば、下記のようなことをしたい時



サンプル


まず、Google Maps v3用のhtmlを準備。head内はこんな感じ

<!--ここからGoogle Maps v3用-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/downloadxml.js"></script>
<script type="text/javascript">
//<![CDATA[
var markers = [];
var sidebarhtml = '';
 
function initialize()
    {
        var map = new google.maps.Map(document.getElementById("map_canvas"), //Body内に記載するID
        {
        center: new google.maps.LatLng(34.669239,135.5115686), //地図の中心座標
        zoom: 8, //ズーム
		zoomControl: true, //地図のコントロールバー等（オプション設定）
		scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        });
  
        downloadUrl("google_pl.xml", function(data) //読み込むxml（後で説明）
        {
        var xmlDoc = xmlParse(data);
        var markers = xmlDoc.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++)
            {
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
            var name = markers[i].getAttribute("name");
            var category = markers[i].getAttribute("category");
            var mapall = markers[i].getAttribute("mapall");
            var html = '<div style="height: 180px; width: 160px"><b>'+name+'</b><br>'+mapall+'</b>'  ; //吹き出しのhtml
            createMarker(point,html,map,category,name);
            }
            document.getElementById("side_bar").innerHTML = sidebarhtml;
        });
 
    }
 
function createMarker(point,html,map,category,name)
    {
        var customIcons =
        {
     　　　　　  blue: //マークのＩＤ
            {
            icon: 'images/ie_ic.png', //呼び出すマーク画像
            shadow: 'images/ie_ic.png'
            },
            red:
            {
            icon: 'images/orange.png',
            shadow: 'images/orange.png'
            },     
            gray:
            {
            icon: 'images/gr_ic02.png',
            shadow: 'images/gr_ic02.png'
            }
        };
        var icon = customIcons[category] || {};
        var marker = new google.maps.Marker(
        {
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        title: name
        });
 
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function()
        {
        infoWindow.close();
        infoWindow.setContent(html);
        infoWindow.open(map,marker);
        map.panTo(point);
        });
    }
    var infoWindow = new google.maps.InfoWindow();
 
 
function myclick(num)
    {
    google.maps.event.trigger(markers[num], "click");
    }
 
window.onload=initialize;
 
//]]>
</script>

上記、緑字の箇所を自分の設定に適時変更
表示するbody部に

<div id="map_canvas" align="left" style="font-size : 12px;vertical-align : 50%;text-align : left;height:400px;width:830px;float : left;"></div>

表示サイズ等は適時変更。

次にjsを準備。というか最初に準備するべきかな（笑）

downloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。
ダウンロードして保存。

最後にxmlファイルの作成
上記ソース内（//読み込むxml（後で説明））と同じファイル名にて新規作成。

<?xml version="1.0" encoding="utf-8"?>
<markers>

<marker  zoom="ズームサイズ"  lat="座標軸" lng="座標軸" category="マーク画像ＩＤ" name="タイトル" ename="" mapall="&lt;img src='表示画像.jpg' width='135' height='90' &gt;&lt;br&gt; コメント&lt;br&gt;コメント&lt;br&gt;&lt;a href='リンクアドレス' target='_blank'&gt;コメント&lt;/a&gt; "/>
<marker  zoom="9"  lat="34.768422" lng="136.189853" category="blue" name="No.2608　三重県伊賀市" ename="" mapall="&lt;img src='2608/i01.jpg' width='135' height='90' &gt;&lt;br&gt; 土地/263坪&lt;br&gt;建物/30坪&lt;br&gt;&lt;a href='plan/2608/index.html' target='_blank'&gt;物件詳細を見る&lt;/a&gt; "/>

</markers>

上記、<marker zoom～　 "/>までを表示したい数だけ記載する。（注意:html特殊文字は文字表記で）
・・・で完成。
あっ、マーク画像は好きなのを作成してimagesフォルダにでも入れておくこと。（//呼び出し画像マークの箇所でリンク位置指定）









※追記

GoogleMapの座標軸の取り方を記載忘れ。
検索で「Googlemap　座標軸取得」等で検索すればいっぱい出てくるけど
私は、ここを使わせて頂いています。

住所を入力して、「検索」
次画面で出てくる「lat」と「lng」です。