i have multiple markers on google map custom icon. marker represents number of items in region. have added infobox serves label of how many items in region.
the infobox uses floatpane move marker when map dragged.
the problem found comment on question mentions markers , infoboxes on different panes , infobox displays on markers. prefer 1 same level associated marker.
var labeltext = '<div style="color: #000000"><b>'+ sometitle +'</b></div>'; var myoptions = { content: labeltext, boxstyle: { textalign: "center", fontsize: "8pt", width: "90px" }, disableautopan: false, pixeloffset: new google.maps.size(-45, someoffsety), position: calculatedcenterposition, closeboxurl: "", ishidden: false, enableeventpropagation: true, pane: "floatpane" }; var label = new infobox(myoptions); label.open(map, gmarker); has dealt issue yet? how can solved?
you can use markerwithlabel
the "basic" example has multiple characters. related question: google maps marker label multiple characters
code snippet:
function initmap() { var latlng = new google.maps.latlng(49.47805, -123.84716); var homelatlng = new google.maps.latlng(49.47805, -123.84716); var map = new google.maps.map(document.getelementbyid('map_canvas'), { zoom: 13, center: latlng, maptypeid: google.maps.maptypeid.roadmap }); var marker1 = new markerwithlabel({ position: homelatlng, draggable: true, raiseondrag: true, map: map, labelcontent: "$425k", labelanchor: new google.maps.point(22, 0), labelclass: "labels", // css class label labelstyle: { opacity: 0.75 } }); var marker2 = new markerwithlabel({ position: new google.maps.latlng(49.475, -123.84), draggable: true, raiseondrag: true, map: map, labelcontent: "$395k", labelanchor: new google.maps.point(22, 0), labelclass: "labels", // css class label labelstyle: { opacity: 1.0 } }); var iw1 = new google.maps.infowindow({ content: "home sale" }); var iw2 = new google.maps.infowindow({ content: "another home sale" }); google.maps.event.addlistener(marker1, "click", function(e) { iw1.open(map, this); }); google.maps.event.addlistener(marker2, "click", function(e) { iw2.open(map, this); }); } google.maps.event.adddomlistener(window, 'load', initmap);.labels { color: red; background-color: white; font-family: "lucida grande", "arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 40px; border: 2px solid black; white-space: nowrap; }<script src="http://maps.googleapis.com/maps/api/js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> <div id="map_canvas" style="height: 400px; width: 100%;"></div> <div id="log"></div>
Comments
Post a Comment