Adding button to info window

7,278 views
Skip to first unread message

Pawan

unread,
Aug 4, 2010, 8:48:23 AM8/4/10
to Google Maps JavaScript API v3, pawa...@yahoo.com
I want to put a button in the info window, so that on clicking the
button, the contents of the info window change, and new contents (pre-
written) appear with a new button. On clicking this new button the
contents come back to their original state. Please help.

Grok Lobster

unread,
Aug 4, 2010, 1:13:00 PM8/4/10
to Google Maps JavaScript API v3
Nothing to do with the maps API.

http://javascript-reference.info/

Federico Ulfo

unread,
Aug 4, 2010, 4:07:37 PM8/4/10
to google-map...@googlegroups.com
That's easy,

// create marker
var marker = new google.maps.Marker({
     position: location,
     map: map           
});

// create the html
html = '<div id="info_content">here your content <button onclick="loadContent()">load content</button></div>';

// load the info window with the html
stepDisplay.setContent(html);
stepDisplay.open(map, marker);

function loadContent(){
     document.getElementById('info_content').innerHtml = 'Now here you add your new code';
}


if you want that the message pop-out when you click the marker, you must add an event listener:

 google.maps.event.addListener(marker, 'click', function() {
     stepDisplay.setContent(html);
     stepDisplay.open(map, marker);
}


If you have more doubt, take a look to some of mine experiments:
www.federicoulfo.it/maps/

Cheers


2010/8/4 Grok Lobster <discgo...@gmail.com>
--
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.


Pawan

unread,
Aug 5, 2010, 2:07:37 AM8/5/10
to Google Maps JavaScript API v3
Thanks Federico,

I don't know jawa at all.
But with your hint I got it done.

Great Help Indeed.
This is a wonderful place with wonderful people.

Thanks.

Pawan Verma

On Aug 5, 1:07 am, Federico Ulfo <rainelemen...@gmail.com> wrote:
> That's easy,
>
> // create marker
> var marker = new google.maps.Marker({
>      position: location,
>      map: map
>
> });
>
> // create the html
> html = '<div id="info_content">here your content <button
> onclick="loadContent()">load content</button></div>';
>
> // load the info window with the html
> stepDisplay.setContent(html);
> stepDisplay.open(map, marker);
>
> function loadContent(){
>      document.getElementById('info_content').innerHtml = 'Now here you add
> your new code';
>
> }
>
> if you want that the message pop-out when you click the marker, you must add
> an event listener:
>
>  google.maps.event.addListener(marker, 'click', function() {
>      stepDisplay.setContent(html);
>      stepDisplay.open(map, marker);
>
> }
>
> If you have more doubt, take a look to some of mine experiments:www.federicoulfo.it/maps/
>
> Cheers
>
> 2010/8/4 Grok Lobster <discgolfm...@gmail.com>
>
>
>
> > Nothing to do with the maps API.
>
> >http://javascript-reference.info/
>
> > On Aug 4, 5:48 am, Pawan <contactc...@gmail.com> wrote:
> > > I want to put a button in the info window, so that on clicking the
> > > button, the contents of the info window change, and new contents (pre-
> > > written)  appear with a new button. On clicking this new button the
> > > contents come back to their original state. Please help.
>
> > --
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

Federico Ulfo

unread,
Aug 5, 2010, 5:35:49 AM8/5/10
to google-map...@googlegroups.com
You welcome!
Federico,
www.federicoulfo.it / www.raintpl.com

2010/8/5 Pawan <conta...@gmail.com>
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages