CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
paulyay
paulyay

Reputation: 67

Hyperlink to open marker infowindow on Google Map

I have a map, with a side bar div next to it. I'm trying to make it so that each marker on the map has a corresponding hyperlink in the sidebar, and when clicked, the info box for that marker pops up.

function linkClick(){
   google.maps.event.trigger(gmarkers[cpid], "click");
}

content += '<a href="javascript:linkClick(' + cpid + ')">'+tmpName+"</a><br>";
$("#cplist").html(content);

cpid is a unique id for every point on the map, a value which is stored in the database with the rest of the information for the markers.

I have my markers on the map, and my links in the side bar, but I'm not sure how to make the connection between to two. I've created the 'linkClick' function to try and achieve this, but I just get the error:

ReferenceError: Can't find variable: linkClick

Currently all of the above code is in the loop which plots the markers on the map. I think i've included enough detail/code.

This is an example of what I want to achieve http://www.geocodezip.com/v3_MW_example_categories.html

Upvotes: 0

Views: 2217

Answers (3)

Sean Mickey
Sean Mickey

Reputation: 7716

I suggest changing your approach - rather than trying to push the click event, just go directly to the InfoWindow and call open. Somewhere else in your code you have a click event listener for each marker that opens an InfoWindow; so maintain reference(s) to your InfoWindow instances and open them, just the same as in the marker click event handler, when the onlick function attached to the link is called.

Or, if you are following a common strategy and working with a single, global InfoWindow, just write a function that accepts the cpid, places the necessary content in the InfoWindow, sets the correct position, and then calls InfoWindow.open( map ).

So if this is your event listener code:

google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(tmpName+" is "+tmpDist+"km away from you."); 
    infowindow.open(map, this);
});

Add a new function:

function openInfoWindow( cpidAndWhateverElseParam ) {
    infowindow.setContent(tmpName+" is "+tmpDist+"km away from you."); 
    infowindow.open(map, this);
}

And change your link code to be:

content += '<a href="javascript:openInfoWindow(' + cpidAndWhateverElseParam +
    ')">'+tmpName+"</a><br>";

Upvotes: 2

Jorge
Jorge

Reputation: 18257

I made something similar once, but instead of use an element a i used a button and like javascript pure in the event OnClick I put my event handler and it works, so in your case i tried to handle the event like this

<a onClick=linkClick(' + cpid + ')">'+tmpName+"</a>

Upvotes: 0

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

For function you are not passing any variable, thats why it is giving ReferenceError: Can't find variable: linkClick

function linkClick(cpid){
   google.maps.event.trigger(gmarkers[cpid], "click");
}

content += <a onClick=linkClick(' + cpid + ')">'+tmpName+"</a><br>";
$("#cplist").html(content);

Upvotes: 0

Related Questions