カスタム kml ファイルを Google マップに読み込む必要があります。コードは適切なリソースからほとんど変更されていません。
function initialize() {
var myLatlng = new google.maps.LatLng(39.397, -100.644);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var geoXml = new geoXML3.parser({map: map, processStyles: true});
geoXml.parse('test.kml');
};
.kml は Google マップから直接取得したもので、多数のマーカーがあり、すべてカスタム アイコンが付いています。次に例を示します。
<Style id="sn_1">
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/paddle/Z.png</href>
</Icon>
<hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
</IconStyle>
<ListStyle>
<ItemIcon>
<href>http://maps.google.com/mapfiles/kml/paddle/Z-lv.png</href>
</ItemIcon>
</ListStyle>
</Style>
その他のアイコンは、次のような (既存の) ローカル パスとして定義されます。
<Icon>
<href>img/marker/5.png</href>
</Icon>
ただし、マップは問題なく表示されますが、アイコンは読み込まれず、代わりにデフォルトの Google マップ アイコンのみが表示されます。私のJavaScriptの知識はかなり限られており、これ以上頭を悩ませてもどこにも行けないと感じているので、これに関する助けをいただければ幸いです...
乾杯 :)