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.
