open infoWindow from outside of Google map

Question

is there any way I can open infowindows of markers from an outside table. I have seen other posts from other users in "stackoverflow" as well and it seems a bit tricky to accomplish.

Here is the code am using . In the last 2 lines of code i am appending the tweets into a table and from there if i want to click on any of the tweets it should open the corresponding marker on the map. the problem is i dont know how to link the marker and the table row.

            function geocode(user, date, profile_img, text, url, location) {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: location
                }, function (response, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var x = response[0].geometry.location.lat(),
                            y = response[0].geometry.location.lng();
                        var myLatLng = new google.maps.LatLng(x, y);
                        var marker = new google.maps.Marker({
                            icon: profile_img,
                            title: user,
                            map: map,
                            position: myLatLng
                        });
                        var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">' + user + '</h2>' + '<div id="bodyContent">' + text + '</div>' + '<div id="siteNotice"><a href="' + url + '"></a></div>' + '<p>Date Posted- ' + date + '.</p>' + '</div>';


                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });

                $('#user-tweets').css("overflow","scroll");
                $('#user-tweets').append('<table width="320" border="0"><tr><td onclick=infoWindow(map,marker); colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'</td></tr></table><hr>');
                        function infoWindow(map,marker){

                            infowindow.open(map, marker);
                        }
                        bounds.extend(myLatLng);

With brackets and curly braces out of balance, it's hard to understand the variables'/functions' scope. — Beetroot-Beetroot, Sep 01 '12 at 02:38

Beetroot-Beetroot · Accepted Answer · 2012-09-02T20:32:36.123

2

ak_47,

With the assumption that unclosed brackets and curly braces all close after the provided code ...

First make templates for the lengthy HTML strings in an outer scope - ie. outside function geocode(){} - somewhere where they are defined once, not every time they are needed.

var templates = [];
templates[0] = '<div><div></div><h2 class="firstHeading">%user</h2><div>%text</div><div><a href="%url"></a></div><p>Date Posted- %date.</p></div>';
templates[1] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">%user</td></tr><tr><td width="45"><a href="%profile_img"><img src="%profile_img" width="55" height="50" /></a></td><td width="186">%text</td></tr></table><hr />';

You will see that I removed ids, which would otherwise be repeated every time the templates are used. Id's lose their purpose when repeated.

Then replace everything from var contentString = ...; to function infoWindow(map,marker){...} with :

var infowindow = new google.maps.InfoWindow({
    content: templates[0].replace('%user',user).replace('%text',text).replace('%url',url).replace('%date',date);
});
var $tweet = $(templates[1].replace('%user',user).replace(/%profile_img/g,profile_img).replace('%text',text));
$('#user-tweets').css("overflow","scroll").append($tweet);
function openInfoWindow() {
    infowindow.open(map, marker);
}
google.maps.event.addListener(marker, 'click', openInfoWindow);
$tweet.find(".user").on('click', openInfoWindow);

You will see that function openInfoWindow() doesn't accept parameters. Instead it picks up map and marker through closure (they are defined in outer scopes). This allows openInfoWindow to be attached by name in two places - as the handler for marker click and tweet click (which is what you want).

This may not be 100% correct because I had to make assumptions but it should at least give you an idea of how to approach the problem.

edited Sep 02 '12 at 20:32

answered Sep 01 '12 at 09:31

Beetroot-Beetroot

18,022
3
37
44

thanks man :)) I will have a look at it later and tell u.thanks !! – anjel Sep 01 '12 at 10:53
opening the infowindows from the #user-tweet div is working but there is a problem when the tweets are loaded inside the div.ONLY the last tweet from the results is shown on the div.You know why this is happening? – anjel Sep 01 '12 at 12:09
`geocode()` appears to be written to insert one tweet and create one marker and one infoWindow every time the function is called. If many markers appear but only one tweet then the problem must be internal to `geocode`. If only one marker and one tweet appears, then it would appear that `geocode` is called just once - ie the problem is most probably external to `geocode`. – Beetroot-Beetroot Sep 01 '12 at 16:59
got it I had to put the declaration of the templates inside the geocode function :) – anjel Sep 02 '12 at 14:33
OK, that's cool though `templates` should remain available from an outer scope if pasted into the "right" place. Hard to say exactly where without seeing all the code. BTW, I forgot to remove `onclick=infoWindow(map,marker);` from `template[1]` - now edited above. – Beetroot-Beetroot Sep 02 '12 at 20:42
I have another problem while loading tweets inside the div when am using yahoo placemaker. It is an asynchronous function. I can see that it loads the tweets on the div but all the tweets have the same information from the last tweet from the placemaker result. http://jsfiddle.net/ang3lo0o/B4Cpx/ You know how to solve this? thanks – anjel Sep 03 '12 at 11:57
ak, I think that posting the answer here might be confusing - not to you but to people who visit later. Can you ask a new question and post a link to it here please? Ta. – Beetroot-Beetroot Sep 04 '12 at 16:05
http://stackoverflow.com/questions/12253544/show-tweets-inside-div-from-an-asynchronous-loop/12254315#12254315 here this is the question !!!! – anjel Sep 04 '12 at 22:24
Can you see the link i posted? – anjel Sep 05 '12 at 11:39
ak, yes but I'm still working on a solution - it's trickier than I was expecting. – Beetroot-Beetroot Sep 05 '12 at 16:30

open infoWindow from outside of Google map

1 Answers1