Добавление динамического содержимого в Карт Google Maps

Я пытаюсь создать карту google с пользовательскими значками. Мне нужно иметь возможность добавлять динамический текст к фактическому маркеру. Другими словами, есть ли вообще добавить div? Мне нужно добавить цены от xml до фактического маркера. Надеюсь, это имеет смысл. ЛЮБАЯ ПОМОЩЬ была бы высоко оценена, или кто-нибудь может указать мне в правильном направлении. Благодаря!Добавление динамического содержимого в Карт Google Maps

МОЙ Jquery:

function addMarker() { 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker 
     var lat = parseFloat(markers[i][0]); 
     var lng = parseFloat(markers[i][1]); 
     var trailhead_name = markers[i][2]; 

     var myLatlng = new google.maps.LatLng(lat, lng); 

     var contentString = "<html><body><div class='mapPopup'><div class='mapPopIn'>" + trailhead_name + "</div></div></body></html>"; 
     var image = 'images/map-marker.png'; 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: "Click for more information", 
      icon: image 
     });

Фактическая карта я пытаюсь изменить это: http://travellinginmexico.com/hotels_map.php?c=cancun

источник

2012-05-20 lov2code

Есть два варианта, InfoBox и MarkerWithLabel. Мне нравится MarkerWithlabel, потому что он легче и проще в использовании. Недостатком является то, что я не могу понять, как заменить текст Markerwithlabel после его создания. Вы можете сделать это с помощью InfoBox, потому что вам действительно нужно создать div.

Я приведу пример со статическими данными из Javascript, которые вы можете заменить данными из XML. Вам также нужно будет пометить MarkerWithLabel, чтобы он соответствовал вашему значку. Например, labelStyle: top изменит вертикальное смещение.

http://jsfiddle.net/RAH6G/ нажмите кнопку «не совсем аякс».

function createMarker(position, label) { 
    return new MarkerWithLabel({ 
    position: position, 
    draggable: false, 
    map: map, 
    labelText: label, 
    labelClass: "labels", // the CSS class for the label 
    labelStyle: {top: "0px", left: "-21px", opacity: 0.75}, 
    labelVisible: true 
    }); 
} 

var readData = function() { // create markers 
    pos = [ 
    new google.maps.LatLng(40, -85), 
    new google.maps.LatLng(42, -92), 
    new google.maps.LatLng(36, -100), 
    new google.maps.LatLng(39, -112) 
    ]; 

    label = ["$200", "99pts.", "US$30", "US$999"]; 
    for (var i = 0; i < pos.length; i++) { 
    createMarker(pos[i], label[i]); 
    }  
}

источник

2012-05-20 22:45:31

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

Создать маркер с MarkerWithLabel:

marker = new MarkerWithLabel({ 
    position: googlemapslatlng, 
    icon: url-to-icon, 
    map: map, 
    title: "Marker Title", 
    labelContent: content, 
    labelClass: marker_shade 
});

Затем вы можете обновить метку с помощью:

marker.labelClass = marker_shade_updated; 
marker.labelContent = marker_content_updated; 
marker.label.setStyles(); // Force the marker label to redraw

Надеется, что это помогает.

источник

2013-04-19 02:52:35 TheMeddlingMonk

Могу ли я спросить, какую версию вы используете? Не работает для меня. –

Добавление динамического содержимого в Карт Google Maps

ответ

Смежные вопросы