スポンサードリンク

マーカー(アイコン)の種類を変更する/Google Maps API

Google Maps API V3は、コチラの記事へ

アイコン・マーカの表示の変更

このサンプルマップ、マーカがただの赤い丸じゃつまらないので、Google Maps 標準アイコン(マーカー)以外にもいろいろ変更を試してみる。

Google Maps API v3は、コチラ

アイコンとマーカーの一覧表

公園以外にもいろいろ作成したい場合は、こっちのアイコン(マーカー)一覧表からコピーして変更してみて下さい。

カスタムアイコン用の影は、ここで作成できます。

HTML Script

ココでは、ただの標準マーカーだった赤いアイコンを、公園を示す緑色の木のマーカーへ変更する。

変更箇所は、赤文字部のみ

<script type=”text/javascript”>
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
var icon = Array();
icon[“kouen”]  = new GIcon();
icon[“kouen”] .image = “http://maps.google.co.jp/mapfiles/ms/icons/tree.png”;
icon[“kouen”] .iconSize = new GSize(34,34);
icon[“kouen”] .iconAnchor = new GLatLng(17,10);
icon[“kouen”] .infoWindowAnchor = new GLatLng(17,10);
icon[“kouen”] .shadow = “http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png”;
icon[“kouen”] .shadowSize = new GSize(70, 30);
icon[“kouen”] .infoShadowAnchor = new GPoint(15, 31);
function createMarker(point, linkurl,explanation, name, category) {
var marker = new GMarker(point, icon[category]);
marker.mycategory = category;
marker.myname = name;
var html = “<strong>”+name+”<\/strong><br>”+linkurl+”<\/strong><br>”+explanation+””;
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
gmarkers.push(marker);
return marker;
}
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].show();
}
}
document.getElementById(category+”box”).checked = true;
}
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].hide();
}
}
document.getElementById(category+”box”).checked = false;
map.closeInfoWindow();
}
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
makeSidebar();
}
function myclick(i) {
GEvent.trigger(gmarkers[i],”click”);
}
function makeSidebar() {
var html = “”;
for (var i=0; i<gmarkers.length; i++) {
if (!gmarkers[i].isHidden()) {
html += ‘<a href=”javascript:myclick(‘ + i + ‘)”>’ + gmarkers[i].myname + ‘<\/a><br>';
}
}
document.getElementById(“side_bar”).innerHTML = html;
}
var map = new GMap2(document.getElementById(“map”));
map.setUIToDefault();
map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(6, 30)));
map.setCenter(new GLatLng(36.17336, 138.44971), 7); // 初期座標
GDownloadUrl(“kouen-demo.php”, function(doc) {
var xmlDoc = GXml.parse(doc);
var KOUEN = xmlDoc.documentElement.getElementsByTagName(“marker”);
for (var i = 0; i < KOUEN.length; i++) {
var lat = parseFloat(KOUEN[i].getAttribute(“lat”)); // 緯度
var lng = parseFloat(KOUEN[i].getAttribute(“lng”)); // 経度
var point = new GLatLng(lat,lng);
var linkurl = KOUEN[i].getAttribute(“linkurl”); // リンク
var explanation = KOUEN[i].getAttribute(“explanation”); // 説明
var name = KOUEN[i].getAttribute(“name”); // 公園名
var category = KOUEN[i].getAttribute(“category”); //公園タグ
var marker = createMarker(point, linkurl,explanation ,name, category);
map.addOverlay(marker);
}
makeSidebar();
});
}
//]]>
</script>

サンプル

完成したサンプルGoogle Maps は、緑の木のマーカが表示されきれい。ん、いいね。

Google Maps APIサンプル アイコン(マーカー)の種類を変更し表示させる

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">