使用gmap3自定義InfoWindow和標記

我正在使用gmap3創建一個具有我指定信息的InfoWindow的Google Map。它的工作原理，但我想定製信息窗口是一個圓角矩形和沒有箭頭指向的位置和我想要一個自定義標記的實際位置。使用gmap3自定義InfoWindow和標記

我該怎麼做？

（我發現gmap3的文檔是有點混亂。）

這是我目前使用的JS：

$("#map").gmap3({ 
map:{ 
    options:{ 
    zoom:18, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    navigationControl: true, 
    scrollwheel: true, 
    streetViewControl: true 
    } 
}, 
infowindow:{ 
    address:"Boulder, Colorado", 
    options:{ 
    content: "Text" 
    } 
} 
});

我將如何改變信息窗口的圓角矩形，沒有箭頭和自定義標記？

來源

2013-03-15 L84

我會用infobox被描述爲：

此類行爲就像google.maps.InfoWindow，但它支持先進的造型幾個附加屬性。 InfoBox可以將也用作地圖標籤。

但是它不是基於gmap3庫，在這個意義上我認爲，你需要開始初始化使用「正常方式亦稱google maps api v3 #infowindows」信息窗口（S）。但我會推薦infobox，因爲我已經有了我的infowindows工作和樣式，因爲我已經想要。

此外，還有什麼 - 它帶有打包和非打包版本，所以你將完全控制其使用的代碼。

請查看以下鏈接：

編輯：

由於問題也自定義標記是起訴我注意到，gmap3支持（但是）傳遞標記選項的值，以便您可以輕鬆地自定義它們。（您當然需要根據）。爲了簡單地更改標記，你可以像下面的圖標：

... somewhere within initialization ... 
    marker:{ 
     options:{ 
      draggable: false, 
      icon: "urlToYourImage.png", 
      optimized: false // needed to be false when using images 
     }, 
...

但是，如果你在這裏，提問技巧;）我會建議不要使用gmap3在所有 - 我已經嘗試過它，並最終交換使用正常的谷歌地圖api v3，因爲gmap3只會混淆並隱藏代碼到谷歌地圖api的頂部。但它的選擇當然。

乾杯。

來源

2013-03-15 21:23:24

我知道這是一個相當古老的問題，但我想我可以根據我最近的gmap3和Google Maps API的經驗添加一些輸入。

而不是沿着使用infobox庫的路線（我發現有一匹母馬可以與gmap3庫一起工作），我決定通過綁定標記點擊事件來產生一個我可以設計的覆蓋圖然而我想要的。

所以，我對像這樣

// JSON 
var data = JSON.parse('[ 
{ 
    "address":"New Street, Salisbury, UK", 
    "content":"hello world from salisbury" 
}, 
{ 
    "address":"86000 Poitiers, France" , 
    "content":"hello world from poitiers" 
}, 
{ 
    "address":"66000 Perpignam, France", 
    "content":"hello world from perpignam" 
} 

]');

設置我的GMAP默認

// Gmap Defaults 
$map.gmap3({ 
    map:{ 
     options:{ 
      center:[46.578498,2.457275], 
      zoom: 5 
     } 
    } 
});

我依次通過我的JSON我用我所有的地址JSON和建立映射

// Json Loop 
$.each(data, function(key, val) { 
    $map.gmap3({ 
     marker:{ 
      values:[{ 
       address:val.address, 
       events: { 
        click: function() { 

         gmap_clear_markers(); 

         $(this).gmap3({ 
          overlay:{ 
           address:val.address, 
           options:{ 
            content: '<div class="infobox">'+val.content+'</div>', 
            offset:{ 
             y:-32, 
             x:12 
            } 
           } 
          } 
         }); 
        } 
       } 
      }] 
     } 
    }); 
});

gmap_clear_markers()函數觸發所有其他信息框（覆蓋）實例被刪除。

// Function Clear Markers 
function gmap_clear_markers() { 
    $('.infobox').each(function() { 
     $(this).remove(); 
    }); 
}

現在，我想我的JSON，我可以添加儘可能多的地址，它會與剛帶班的信息框一個普通的div包裝，我可以相應風格的信息框。

我不確定這是否是最好的方法 - 我只是說這對我有用。

這裏是JSFIDDLE example

來源

2013-09-27 09:43:55

使用gmap3自定義InfoWindow和標記

回答

相關問題