Member Avatar for sanjay_7

i am trying to create custom marker in google map with numbered marker. in which marker image is custom and want to placed number as a label, So can anybody tell me how to do it.

here is my code

var locations = [
      ['Bondi Beach', -33.890542, 151.300856, 4],
      ['Coogee Beach', -33.993036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.70010128657071, 110.28747820854187, 2],
      ['Maroubra Beach', -34.950198, 100.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-85, -144),
    zIndex: null,
    boxStyle: {
        width: "280px",
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1)
});
    var image = '../images/pin.jpg';
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon:image
        //opacity: .5
      });

      google.maps.event.addListener(marker, 'click', function() {
            document.getElementById('infobox1').style.display="block";
            infobox.open(map, this);
            map.panTo(loc);
        });
    }

and html code is

<div id="map_canvas" style="height: 100%; width: 100%;"></div>
 <div class="infobox-wrapper">
    <div id="infobox1">
        <div class="iw-image"><img class="iw-image" src="../images/property1.jpg"><img class="iw-back-image" src="../images/line.jpg"></div>
        <div class="iw-prinfo">1 OFFICE<br/>137 FIFTH AVE </div>
        <div class="map-icon"><img class="map-icon1" src="../images/map-icon.png"><img class="map-icon2" src="../images/map-icon2.png"></div>
    </div>
</div

custom icon is simply a image which i want to place on map. and yes i had read all the answers after that i had post the question here. and number as a label in marker i want to display.

  • 2 Contributors
  • 1 Reply
  • 243 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for pritaeas

number as a label in marker i want to display.

I don't think gmap supports this, so you need to create pins for every number, either statically or dynamically.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.