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 Nov 05 '14 at 16:24 — geocodezip, Nov 05 '14 at 16:24

Jaime Yule · Answer 1 · 2014-11-05T17:29:02.080

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 05 '14 at 17:29

answered Nov 05 '14 at 16:23

Jaime Yule

981
1
11
20

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? – Megan Mallard Nov 05 '14 at 16:30
Can you share with me this .kml ? – Jaime Yule Nov 05 '14 at 16:34
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. – Megan Mallard Nov 05 '14 at 16:53
If you want to use _setCenter_ when u click on a layer, you will need to search for this function in geoxml3 api. – Jaime Yule Nov 05 '14 at 16:58
I see other maps/geoXML examples that use setCenter. Reading this (http://stackoverflow.com/questions/24131108/adding-custom-html-to-infowindow-of-kml-data) 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. – Megan Mallard Nov 05 '14 at 17:09
Unfortunally, this geoxml3 lib. Doesn't support what u want to do. Besides, you can download and edit it. After line 1037 put `if (infoWindowOptions.openInfoCallback != null) infoWindowOptions.openInfoCallback(e);` and then in use it on your code. If u want I can send you the edit .js file. Here from my public repo: https://onedrive.live.com/?cid=4F97C67E332BE95E&id=4F97C67E332BE95E%219206 – Jaime Yule Nov 05 '14 at 17:27
geoxml3 supports anything the Google Maps API v3 will let you do. If the map click listener needs to respond to clicks on the polygons, either make the polygons "unclickable", or add a click listener to them that does the same thing. – geocodezip Nov 05 '14 at 17:38
Can you(@geocodezip) show an example of how to add an click listener to the polygons themselves? I would have preferred that, but I only saw examples of event listeners for maps, so I used that as my template. – Megan Mallard Nov 05 '14 at 17:46
That is a different question from this one. You should probably accept MalGaniS answer if it solved the original problem (which it should have, as that was really why the existing map click handler isn't doing anything). – geocodezip Nov 06 '14 at 02:42

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

1 Answers1