Solved

Referencing Google Maps API markers from Javascript

Posted on 2013-06-17
2
410 Views
Last Modified: 2013-06-17
Here is my test page:
http://tech.lifespanfitness.com/store-locator.asp?p=19565

It works fine. If you click any of the red markers on the map, you get a details "info window". The click event is coded like this:

google.maps.event.addListener(marker0,'click', function(){
	infowindow.close();
	infowindow.setContent('<p><b>Play It Again Sports - Wyomissing</b><br />1050 Berkshire Blvd, Wyomissing, PA 19610<br />United States<br />610.779.8360<br />Distance: 5 miles or 9 kilometers</p>');
	infowindow.open(map,marker0);
});

Open in new window


However, I would like to also trigger these "info window" events from other elements. For example, I setup a test button on that same page (you will see it at the top-right of the screen):

<input id="mybutton" type="button" value="click here" />

Open in new window


I tried handling that button like this:

$(function(){
	$('#mybutton').click(function(marker0){
		infowindow.close();
		infowindow.setContent('content here');
		infowindow.open(map,marker0);
	});
});

Open in new window


...but I just get an error "cannot find the variable 'infowindow'".

How can I make it so clicking that button displays one of the five info windows on that screen? I guess I am not sure how to reference the info window, outside of the code that Google Maps API has already provided.

Thank you!
0
Comment
Question by:bbdesign
2 Comments
 
LVL 4

Accepted Solution

by:
Ersoy Hasan earned 500 total points
ID: 39252933
You can't find infowindow variable because it is defined inside the initialize function's scope and you are trying to access it outside it. Move this :
		$('#mybutton').click(function(marker0){
			infowindow.close();
			infowindow.setContent('content here');
			infowindow.open(map,marker0);
		});

Open in new window

inside the initialize function.
0
 

Author Comment

by:bbdesign
ID: 39252959
You are correct, that fixed it. Thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now