How do I add a title box to a custom google map? -


http://i.stack.imgur.com/6muee.jpg

i managed add custom pointer via google maps, confused how add custom title box of address pointing pointer, in design. please me out. thank you.

for this, use infobox.js, add infobox.js script below google maps js.

here example,

            var marker = new markerwithlabel({                 position: new google.maps.latlng(item.latitude, item.longitude),                 map: window.map,                 zindex: 10,                 title: "hello world",                 html: '<div class="infobox"></div>', //insert infobox html inside                 labelcontent: 'the label want show instead of marker',                 labelanchor: new google.maps.point(22, 0),                 labelclass: "labels", // css class label                 labelstyle: { opacity: 0.75 },             });             var boxtext = document.createelement("div");             boxtext.innerhtml = marker.html;              var _infoboxoptions = {                 content: boxtext         , disableautopan: false         , maxwidth: 0         , pixeloffset: new google.maps.size(-100, -250)         , zindex: null         , closeboxmargin: "10px 2px 2px 2px"         , ishidden: false         , enableeventpropagation: false             };              var ib = new infobox(_infoboxoptions);             marker.infobox = ib;             marker.infobox.isopen = false;             window.markers.push({ marker: marker, id: item.listingid, price: item.price });             //     marker.setanimation(google.maps.animation.bounce);             google.maps.event.addlistener(marker, "click", function (e) {                 x.setzoom(14);                 _.each(winodw.markers, function (item) {                     if (item.marker != marker) {                         item.marker.infobox.close();                         item.marker.infobox.isopen = false;                     }                 });                 if (marker.infobox.isopen === false) {                     marker.infobox.open(window.map, this);                     marker.infobox.isopen = true;                 } else {                     marker.infobox.close();                     marker.infobox.isopen = false;                 }             }); 

of course, should have html , css infobox wanna show on map.


Comments

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -