Google地图和当前位置的自定义标记

Question

我正在构建一个应用程序，它将根据用户当前所在的位置在Google地图上显示标记。但是我发现Google网站上的文档相当令人困惑，我真的不知道从哪里开始。

我想创建一个自定义标记，其中用户位于小图标的形式，然后在其上方显示一个小弹出窗口，当悬停时会说出“你在这里”这样的事情。例如

到目前为止，我有以下代码来创建谷歌地图并获取用户位置。那么我怎么说（以Foursquare为基础）显示蓝色标记：其中位置是，然后在其上方放置一个弹出窗口，其中包含一个小的虚拟形象。 就像这样：

到目前为止，我的Google代码是：

http://jsfiddle.net/dnzZd/

如果有人能帮助我朝着正确的方向前进，我将非常感谢谢谢。我非常擅长HTML和CSS，因此能够轻松创建我想要的样式和外观（如果GMaps甚至依赖于CSS）它只是一个将它放在屏幕上并了解更多内容的情况这是如何运作的。

感谢所有可以提供帮助的人。

Answer 1

基于此处的documentation和此working sample。

以下是您可以添加到代码中以添加标记的内容（将其放在infowindow代码之前）。您需要使用MarkerImage类来获取图标的正确锚点。

var image = 'http://i.stack.imgur.com/orZ4x.png';
var marker = new google.maps.Marker({
        position: pos,
        map: map,
        icon: image
    });  
marker.setMap(map);

var image = 'http://i.stack.imgur.com/KOh5X.png';
var marker = new google.maps.Marker({
    position: pos,
    map: map,
    icon: image
});  
marker.setMap(map);

Answer 2

你可以使用一些if语句在一个标记中完成

  var image = '';

           if (product.category_id == 1) {

                   image = 'images/custom_category_1_icon.png';

           }

           else if (product.category_id == 2) {

                   image = 'images/custom_category_1_icon.png';

           }

           ....

           else if (product.category_id == N) {

                   image = 'images/custom_category_N_icon.png';

           }

//和此处的标记

var marker = new google.maps.Marker({
position: pos,
map: map,
icon: image
});  
marker.setMap(map);