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

问题

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

I managed to add the custom pointer via google maps, but I am confused how to add that custom title box of the address that is pointing to the pointer, as in the design. Please help me out. Thank you.

回答1:

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

here is an 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 your infobox html inside it
                labelContent: 'the label you want to show instead of the marker',
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels", // the CSS class for the 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, you should have the html and css for the infobox you wanna show on the map.

来源：https://stackoverflow.com/questions/30553470/how-do-i-add-a-title-box-to-a-custom-google-map