CODEWITHSUNDEEP
javascriptjquerygoogle-maps
anjel
anjel

Reputation: 1382

open infoWindow from outside of Google map

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);

Upvotes: 1

Views: 981

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

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.

Upvotes: 2

Related Questions