Custom InfoWindow examples

[koichirose]

Hello, I'm trying to use existing divs in my html source as
infowindows (instead of default ones).

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!

[pete]

The technique covered here is the current way to achieve completely
custom infoWindows:
http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

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

[Ben Appleton]

What happens if you forward your div, not your div's html, as the
InfoWindow's content? That is, write:

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.
>
>

[Chris Apolzon]

I think that should work, but $('#my_div') should probably be $('#my_div').html()

[koichirose]

I couldn't do it your way, so here's what I did
I used this: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.0/src/infobox_packed.js

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...

[Haralan Dobrev]

Actually if you are providing a marker (or another MVCObject) as a second parameter to the open method, you don't need to provide the latlng property in the InfoWindowOptions object.

[Haralan Dobrev]

You will get an error saying the content property is set to object or sth like that. You can use $('#my_div')[0] (because jQuery collections are array-like objects) or you can use $('#my_div').html() which is probably better.