Home/ Questions/Q 7966613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T06:28:32+00:00

I am trying to create a google map with custom icon markers. I need

  • 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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