Solved

Event Listener within a Google Maps info window

Posted on 2011-09-06
5
366 Views
Last Modified: 2012-05-12
Here is a link to a page containing a Google Map http://www.soundsairpark.com/sandpit/mapTest.html

As it stands I have a zoom event occurring when the marker is clicked. I would like to change this so the zoom event only occurs only when the "zoom" link within the info window is clicked.
Assistance appreciated.
Regards,
N
0
Comment
Question by:Neil_Bradley
  • 3
  • 2
5 Comments
 
LVL 28

Expert Comment

by:strickdd
Comment Utility
It's because you have:

function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
             
             map.setZoom(15);
        });

Do you see the issue? You call "map.setZoom(15)" when the marker is clicked. Change it to:

function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
0
 
LVL 5

Author Comment

by:Neil_Bradley
Comment Utility
Removing the Zoom from the marker click is straight forward I know and yes your answer would do this. However my question relates to how to add an event listener to the word "zoom" inside the info window so that when it is clicked the zoom occurs.
N
0
 
LVL 28

Accepted Solution

by:
strickdd earned 500 total points
Comment Utility
When you create the link, add a javascript onclick event that will call "map.setZoom(15)"
0
 
LVL 5

Author Comment

by:Neil_Bradley
Comment Utility
That is the crux of my question and what I having difficulty achieving. The attached code is the info window set up or the full script can be found via the link.
http://www.soundsairpark.com/sandpit/mapTest.html
N

// Set up marker with info windows 
    
      var point = new GLatLng(-41.34204, 173.957801);
      var marker = createMarker(point,'<div style="width:240px; font-family:Arial; font-size:14px"><img src="http://www.soundsairpark.com/sandpit/images/structure/logo-icon.png" width="66" height="48"  style="float:left; margin-right:10px">Marlborough Sounds <br>Air Park<br>SH1, Picton. NZ<br> <a id=zoom" href="#">Zoom<\/a><\/div>')
      map.addOverlay(marker);

Open in new window

0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
Comment Utility
Ok, it looks like I have it! Many thanks for pointing me in the right direction. If you are interested I am about to post a related question asking how to create a toggle effect on my button.
Cheers
N

My solution:<input type="button" id="zoom" value="Zoom" onclick="map.setZoom(15)"/>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
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)

728 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

9 Experts available now in Live!

Get 1:1 Help Now