Using event listener in Google Maps API, nothing happens when I click

Question

I'm new with Google Maps API, but I've been trying a relatively simple task. Displaying polygons (from a kml and rendered with geoXml3) and then having the map zoom in on any location the user clicks on. However, when I click on the map, an info window pops up (no change in the zoom or map center). The google.maps.event.addListener function I'm attempting is relatively simple. Is it not doing anything because of the kml layer or the use of geoXml? Thanks!

<!DOCTYPE html>
<html>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

    <script>

        function initialize() {

            var options = {
                center: new google.maps.LatLng(36.0897,-79.4456),
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

            var map = new google.maps.Map(document.getElementById("canvas"), options);
            var geoXml = new geoXML3.parser({
                map: map,
                singleInfoWindow: true,
                infoWindowOptions: {maxWidth:550,cornerRadius: 15},
            });
            geoXml.parse("HUC.kml");

            google.maps.event.addListener(map, "click", function(event){
                map.setZoom(15);
                map.setCenter(event.latLng.lat(),event.latLng.lng());
            }); 

        }

        $(document).ready(initialize);


    </script>

    <h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1> 
    <div id="canvas" style="width:1000px; height:500px"></div>

    <h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4>

    <footer>
        <p>Posted by: Megan Mallard <br> 
        Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p>
    </footer>

<html>

What does your KML look like? (HUC.kml)

geocodezip
– geocodezip

2014-11-05 16:24:33 +00:00
Commented Nov 5, 2014 at 16:24 — geocodezip
– geocodezip, Commented Nov 5, 2014 at 16:24

Jaime Yule · Accepted Answer · 2014-11-05 17:29:02Z

1

The problems seems to be in map.setCenter. It expects a LatLng object, not 2 double args. Try it:

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

<script>

    function initialize() {

        var options = {
            center: new google.maps.LatLng(36.0897,-79.4456),
            mapTypeId: google.maps.MapTypeId.HYBRID,
            zoom: 5
        };

        var infoWindowOpenCallback = function(event){
            map.setZoom(15);
            map.setCenter(event.latLng);
        };

        var map = new google.maps.Map(document.getElementById("canvas"), options);
        var geoXml = new geoXML3.parser({
            map: map,
            singleInfoWindow: true,
            infoWindowOptions: {maxWidth:550,cornerRadius: 15, openInfoCallback: infoWindowOpenCallback},
        });
        geoXml.parse("http://www.unc.edu/~mmallard/interact_HUC/HUC.kml");

        google.maps.event.addListener(map, "click", function(event){
            map.setZoom(15);
            map.setCenter(event.latLng);
        }); 

        google.maps.event.addListener(geoXml, 'click', function(kmlEvent) {
            var text = kmlEvent.featureData.description;
            alert(text);
        });

    }

    $(document).ready(initialize);


</script>

<h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1> 
<div id="canvas" style="width:1000px; height:500px"></div>

<h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4>

<footer>
    <p>Posted by: Megan Mallard <br> 
    Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p>
</footer>

edited Nov 5, 2014 at 17:29

answered Nov 5, 2014 at 16:23

Jaime Yule

1,1011 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Megan Mallard Over a year ago

I tried your version of the code, and it worked as long as the geoXml.parse line is commented out. Is there a way that I can have the kml polygons displayed and use my addListener function?

Jaime Yule Over a year ago

Can you share with me this .kml ?

Megan Mallard Over a year ago

This time, I get the behavior I expect (zoom and a new center) if I click outside the area covered by the polygons. But if I click over the interior of the state, where the polygons are, I just get an infomarker and no zooming.

Jaime Yule Over a year ago

If you want to use setCenter when u click on a layer, you will need to search for this function in geoxml3 api.

Megan Mallard Over a year ago

I see other maps/geoXML examples that use setCenter. Reading this (stackoverflow.com/questions/24131108/…) makes me think that I need to create my own functions to create a marker and zoom to that with some function like the kmlClick fx in the post. Not sure how to do that now, but I can get started with this example code and go from there.

|

Collectives™ on Stack Overflow

Using event listener in Google Maps API, nothing happens when I click

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related