Adding dynamic content to Google Maps marker

2019-04-16 03:16发布

站内文章 / 后端开发
34 0 0

问题:

I am trying to create a google map with custom icon markers. I need to be able to add dynamic text to the actual marker. In other words is there anyway to add a div? I need to add prices from xml to the actual marker.. I hope this makes sense. ANY HELP would be greatly appreciated or if anyone can point me in the right direction. Thanks!

MY 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
        });

The actual map i am trying to modify is: http://travellinginmexico.com/hotels_map.php?c=cancun

回答1:

There are two options, InfoBox and MarkerWithLabel. I like MarkerWithlabel because it's lighter and easier to use. The disadvantage is I can't figure out how to replace the text of Markerwithlabel after it's created. You can do so with InfoBox because you actually need to create a div.

I'll give an example with static data from the Javascript which you can replace with data from an XML. You will also need to style the MarkerWithLabel to fit your icon. For example, labelStyle: top will change the vertical offset.

http://jsfiddle.net/RAH6G/ click the "not really ajax" button.

 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]);
  }     
 }


回答2:

I know this is an older thread, but I had a very similar problem (trying to update the label content of a marker created with MarkerWithLabel) and it took a while for me to find a solution.

Create a marker with MarkerWithLabel:

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

Then you can update the label using:

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

Hope this helps.



标签： google-maps google-maps-markers
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~