Карта Google и пользовательский маркер для текущего местоположения

Question

Я создаю приложение, которое будет отображать маркеры на карте Google в зависимости от того, где в данный момент находится пользователь. Однако я нахожу документацию на сайте Google довольно запутанной, и я не знаю, с чего лучше начать.

Я хочу создать пользовательский маркер, в котором пользователь находится в виде маленькой иконки, а затем показать над ним маленькое всплывающее окно, которое при наведении мыши скажет что-то вроде «ты здесь». например

У меня есть следующий код для создания карты Google и определения местоположения пользователя. Итак, как бы я сказал (основываясь на Foursquare), покажите синий маркер: там, где находится локация, а затем поместите всплывающее окно над ним с небольшим аватаром внутри, например. становится так:

Мой код Google на данный момент:

http://jsfiddle.net/dnzZd/

Если кто-нибудь может помочь мне в правильном направлении, я был бы очень признателен, спасибо. Я очень хорошо разбираюсь в HTML и CSS, поэтому смог бы легко создать стиль и внешний вид, который мне нужен (если GMaps даже полагается на CSS), это всего лишь случай вывести его на экран и понять, как это работает.

Спасибо всем, кто может помочь.

Answer 1

На основе документации здесь и этого рабочего образца .

Вот что вы можете добавить в свой код, чтобы добавить маркеры (вставьте это передкод информационного окна).Вы захотите поработать с классом 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);