使用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和标记

回答

相关问题