CODEWITHSUNDEEP
javascriptgoogle-maps-api-3giskmlpolygon
Damon
Damon

Reputation: 10809

LatLngBounds from polygon in a kml file?

I am new to google maps and the API, trying to have the map pan to an area on a click. I'm not having a great time finding what I need in the API reference and not at all sure how to go about this so I don't have much but here is what I have so far.

I want to make it so clicking any region will pan over to and zoom in to display most of that region, which I believe is what panToBounds is meant to do.

Most of the functionality will be coming from clicking on text names and having the map load showing the right location, rather than clicking around on the map itself

function initialize_neighbourhoodmap(neighbourhood_name) {
    var latlng = new google.maps.LatLng(42.949442,-81.228125);

    var zoom = 11;
    var neighbourhood_center = get_neighbourhood_center();

    var myOptions = {
      zoom: zoom,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("neighbourhood_map"),
        myOptions);

    var neighbourhoods = new google.maps.KmlLayer('http://maps.google.com/maps/ms?authuser=0&ie=UTF8&hl=en&oe=UTF8&vps=3&msa=0&output=kml&msid=217366496682144933685.0004bf3be50d3cd7ad1c2', {suppressInfoWindows: true, preserveViewport:true});
    neighbourhoods.setMap(map);

    google.maps.event.addListener(neighbourhoods, 'click', function(KmlFeatureData) {
        var neighbourhood_name = KmlFeatureData.featureData.name;
    load_neighbourhood(neighbourhood_name, neighbourhoods);
    window.location = "#neighbourhood-neighbourhood "+neighbourhood_name;
    });

    if(typeof neighbourhood_name !== 'undefined'){
        load_neighbourhood(neighbourhood_name, neighbourhood_center);
    }
}

function load_neighbourhood (neighbourhood_name, neighbourhoods) {
    var neighbourhoodbounds = nonexistentgetboundsfunction(neighbourhood_name);
    map.panToBounds(neighbourhood_center[neighbourhood_name][0]);
    $('#neighbourhood h2').html('neighbourhood '+neighbourhood_name);
}

Upvotes: 2

Views: 772

Answers (1)

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

Surely you want other functionality? The UI becomes awkward in my opinion. Well, here it is: http://jsfiddle.net/g343k/3/

I have run into a strange "bug", or some may call "feature", which is associated to the KML polygon. When a region is clicked the map pans to the center of the region; however, when the outside planning_district area is clicked, the map pans to the center of the box, not to where the click is (Sean Mickey tested in FireFox 12 and it pans to the click). I can't figure out a way around this other than subdividing the planning district into dozens of smaller boxes :( Right now I have written the code to ignore clicks to the planning district.

google.maps.event.addListener(neighbourhoods, 'click', function(KmlFeatureData) {
        var neighbourhood_name = KmlFeatureData.featureData.name;
    load_neighbourhood(neighbourhood_name, neighbourhoods);
    window.location = "#neighbourhood-neighbourhood "+neighbourhood_name;
    // ADDED
    // Consider what to do when this outer area is clicked
    if(KmlFeatureData.featureData.name!="planning_districts_2008") {
      map.panTo(KmlFeatureData.latLng);
    }

    });

    // LEFT OUT
    //if(typeof neighbourhood_name !== 'undefined'){
    //    load_neighbourhood(neighbourhood_name, neighbourhood_center);
    //}

    // ADDED
    google.maps.event.addListener(map, 'click', function(event) {
      map.panTo(event.latLng);
    });

Upvotes: 2

Related Questions