I know I can set the content to whatever I want by doing:
infowindow = new google.maps.InfoWindow({content: $("#my_div").html
()}); //this uses jquery;
but I want to style the infowindow itself as an existing div on my
page (which is, of course, hidden).
All the examples I found create and style the div dinamically with
javascript, while my div is already created via php+html+css and I
just want to display it when I click on a marker.
Is there a way to do this? How?
Thank you!
Any HTML you append inside here can be styled with CSS and so forth.
Keep in mind because the content is created by javascript injection,
you can use AJAX to retrieve your dynamic PHP or whatever you need to
do so.
If you mean you have already created all the mark-up for the box
itself, basically you need to re-write it with the JS class in that
example. You don't need to pass inline styles to it
For example instead of:
div = this.div_ = document.createElement("div");
div.style.border = "0px none";
div.style.position = "absolute";
div.style.background = "url('http://gmaps-samples.googlecode.com/svn/
trunk/images/blueinfowindow.gif')";
You could easily have
div = this.div_ = document.createElement("div");
div.addClass("infoWinContainer");
Then using your CSS you can do what you like to "infoWinContainer".
Just make sure you leave
div.setStyle("width", this.width_ + "px");
div.setStyle("height", this.height_ + "px");
Hope this helps you somewhat
Pete
infowindow = new google.maps.InfoWindow({content: $("#my_div")});
> --
> You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
> To post to this group, send email to google-map...@googlegroups.com.
> To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
>
and this is my code:
google.maps.event.addListener(marker, "click", function() {
if (infoBox) infoBox.close();
infoBox = new InfoBox(
{
latlng: marker.getPosition(),
map: map,
content: $("#mydiv").html() //mydiv contains another div
class="infoboxwindow", which is the one I have to style
}
);
infoBox.open(map, marker);
});
I don't understand if there's something wrong with it, provided that
I'd style width and height statically (or via jquery if I want)
On Feb 2, 10:38 pm, pete <petejun...@gmail.com> wrote:
> The technique covered here is the current way to achieve completely
> custom infoWindows:http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/in...