From what I see, in v2 of GMaps API there was a property "buttons" of the InfoWindow object that one could define in a way that given InfoWindow has no close button:
marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});
The above however does not apply for v3. Does anybody know a way to do it? I read about an utility that replaces InfoWindow called InfoBox but it has not been developed for the past 2 years. I'm currently using the latest 3.13 version of Gmaps v3 API.
A workaround with jQuery is acceptable, if there is no better solution.
Update
Displaying a on top of a google map is straight forward :
example css
div.info { position: absolute; z-index: 999; width: 200px; height: 100px; display: none; background-color: #fff; border: 3px solid #ebebeb; padding: 10px; }
A info class somewhere in the markup :
I am a div on top of a google map ..
Always nice to have a short reference to the div :
var info = document.getElementById('myinfo');
The more tricky part, showing the , how and when - here I just assign a click handler to the map (after it is created) and show the info
at mouse location XY inside the map :
google.maps.event.addListener(map, 'click', function(args) { var x=args.pixel.x; //we clicked here var y=args.pixel.y; info.style.left=x+'px'; info.style.top=y+'px'; info.style.display='block'; });
What you gain with this is, that the info follows you around on the map, every time you click.
- You will need more styling so it suits your need, eg so it "looks like an InfoBox", but that should be easy to find out, I am not a librarian :)
- And maybe later on something to close the info with, but that you didn't want in the first place :)
Original answer
You cant! There is no way to do this in the current v3.13 InfoWindow options.
A workaround is to disable the image containing the X :
But this is in no way adviceable!
src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png is just what the infowindow is refering to today. Tomorrow, or in a month, or in a year, this image-reference for sure has changed. As you can see if you search for similar "solutions", made over time - like this. They are all broken today, eg the effort is meaningless.
I think there is extremely good logic in google "refusing" to follow the request for hiding the close-button. If you not need a close-button, what do you need an InfoWindow for anyway? When you are better off just to show a on the map.
回答2:
You can also do it through the css.
.gm-style-iw + div {display: none;}
回答3:
if using jquery just add this
$(".gm-style-iw").next("div").hide();
回答4:
To extend on Louis Moore's answer, you can also center the text after removing the close button:
.gm-style-iw + div {display: none;} .gm-style-iw {text-align:center;}
Without Centering:
With Centering:
回答5:
Thanks Tushar, but also you need put this code in event handler
google.maps.event.addListener(infowindow, 'domready', function(){ $(".gm-style-iw").next("div").hide(); });
回答6:
I used the answer given by Tushar Gaurav, but expanded it a little...
$(".gm-style-iw:contains(" + infoText + ")").css("left", function() { return ($(this).parent().width() - $(this).width()) / 2; }).next("div").remove();
That will remove the X from an infowindow with the text in infoText, and then recenter the text as it's off-center after removing the close button.
Just adding this for anyone else who stumbles across this page as I did.
回答7:
closeBoxURL: ""
as stated before doesn't apply for InfoWIndow. This is an option on the InfoBox.
You may for example use this CSS workaround to remove the X, and the surrounding clickable button:
.gm-style-iw + div { display: none; }
And as davidkonrad said. This is a workaround on the code as it is today. It will likely be changed.
回答8:
My own way (without Jquery) and with realign to the center of the infoWindow:
var content = document.querySelector('.gm-style-iw'); content.parentNode.removeChild(content.nextElementSibling); content.style.setProperty('width', 'auto', 'important'); content.style.setProperty('right', content.style.left, 'important'); content.style.setProperty('text-align', 'center', 'important');
回答9:
My solution:
google.maps.event.addListener(marker, 'click', function() { var wnd = new google.maps.InfoWindow({ content: "" }); google.maps.event.addListener(wnd, 'domready', function(){ $("#viewObject").parent().parent().next().remove(); }); wnd.open(map, marker); });
回答10:
You can use this. This will not hide other images like zoom control, pan control etc. on dom ready of info window you can use this.
google.maps.event.addListener(infoWindow, 'domready', function () { document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none"; });
回答11:
I couldn't get any of the $(".gm-style-iw").next("div").hide(); answers to work even when calling the code after the DOM was loaded, since there was a delay between the code being called and the info window being created. What I did was create an interval that runs until it finds the info window and removes the "X" element. If there's a better way please tell me.
var removeCloseButton = setInterval( function() { if ($(".gm-style-iw").length) { $(".gm-style-iw").next("div").remove(); clearInterval(removeCloseButton); } }, 10 );
回答12:
Using Archers method I need to do
$(".gm-style-iw").css("left", function() { //remove close and recenter return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2; }).next("div").remove();
回答13:
google.maps.event.addListener(infowindow, 'domready', function() { var iwOuter = jQuery('.gm-style-iw'); // Reference to the div that groups the close button elements. var iwCloseBtn = iwOuter.next(); // Apply the desired effect to the close button iwCloseBtn.remove() });
As there is no option to hide this by API parameter, you have to find the element by targeting the content window and remove it.
Hope this helps :)
回答14:
in jQuery's gmap3 plugin this can be accomplished using
google.maps.event.addListener($('#map').gmap3({get:{name:"infowindow"}}), 'domready', function(){ $(".gm-style-iw").next("div").remove(); });
回答15:
Inspect it - it's a div with a class of close on it - you can target it with CSS and set it to display: none;
回答16:
You can just use the option
closeBoxURL : ""
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
From Google Documentation
closeBoxURL | string | The URL of the image representing the close box. Note: The default is the URL for Google's standard close box. Set this property to "" if no close box is required.
Example
var infowindow = new google.maps.InfoWindow({ closeBoxURL: "", closeBoxMargin : "" });
回答17:
You can set "closeBoxURL" property of the Info Window to "" and it will make the button disappear.
var infowindow = new google.maps.InfoWindow({ content: contentString, closeBoxURL: "" });
