image - Google マップ V.3 カスタム アイコン

Question

Google Maps 3 でカスタム マーカー用の同様のスクリプトを作成するにはどうすればよいですか? v.2 でこのように：

var iconBlue = new GIcon(); 
iconBlue.image = 'images/cell1.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(3, 16);
iconBlue.infoWindowAnchor = new GPoint(15, 15);

var iconRed = new GIcon(); 
iconRed.image = 'images/cell3.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(15, 2);
iconRed.infoWindowAnchor = new GPoint(15, 15);

var iconGreen = new GIcon(); 
iconGreen.image = 'images/cell2.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(32, 32);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(-9, 2);
iconGreen.infoWindowAnchor = new GPoint(20, 15);

var customIcons = [];
customIcons["60"] = iconBlue;
customIcons["240"] = iconRed;
customIcons["350"] = iconGreen;

バージョン 3 で次のように書きましたが、マーカーが表示されません。

var cellone = new google.maps.MarkerImage("images/cell1.png", 
    new google.maps.Size(20, 34), new google.maps.Point(0,0), 
    new google.maps.Point(3, 16));
var celltwo = new google.maps.MarkerImage("images/cell2.png",
    new google.maps.Size(20, 34), new google.maps.Point(0,0), 
    new google.maps.Point(-9, 2));
var cellthree = new google.maps.MarkerImage("images/cell3.png", 
    new google.maps.Size(20, 34), new google.maps.Point(0,0), 
    new google.maps.Point(15, 2));

var customIcons = [];
customIcons["60"] = cellone;
customIcons["240"] = celltwo;
customIcons["350"] = cellthree;

Answer 1

私は最近、このアイコンを自分で作成しました。そして、私は最初にあなたが使用したのと同じタイプのコードを使用しましたが、それは機能しませんでした。どうやら新しいGIcon（）は正しく機能していませんでした。

ただし、アイコンを変更する非常に簡単な方法があり、変数を使用しません。これが私がしたことです。

マーカー変数をグローバル変数として宣言します。新しいマーカーを作成するとき、線の1つにアイコンと表示されます：..。

これが私のコードのサンプルです。もちろん、プログラムで機能させるには、特定の行を変更する必要があります（また、特定の関数を変更しない限り、ラベル付きのマーカーを使用することはできません）。

最後に、アイコン：...はコンピュータ上のリンクまたは場所にすることができます。

var iconArray = [
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"],
                 ["http://www.google.com/intl/en_us/mapfiles/ms/micons/ltblue-dot.png"]

                 ]; 


function getMarkers() {
    for (i = 0; i < locations.length; i++) { 
            marker[i] = new MarkerWithLabel({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                draggable: false,
                map: map,
                icon: new google.maps.MarkerImage(iconArray[i]),
                //icon: new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"),
                //labelContent: locations[i][3],
                labelAnchor: new google.maps.Point(30, 0),
                labelClass: "labels", // the CSS class for the label
                 labelStyle: {opacity: 0.75}
            });



        }
}

function initialize() {
  getMarkers();
}

Answer 2

Mike Williams の v2 の「カテゴリ」の例の翻訳版