Add "Search Area" outline onto google maps result

twitter api geo endpoint will NOT give you city boundary,

what they provide you is ONLY bounding box with 5 point(lat, long)

this is what I get from twitter api geo for San Francisco enter image description here


I found a pretty good solution to draw the city border.

Here is a pretty cool tool, where you can draw the city border. You can be as exact as you like to be: http://www.birdtheme.org/useful/v3tool.html

On the right side you get a live preview of your code. You can choose between KML and javascript. Switch to javascript. Then copy your coordinates.

Here's the full site where you can see the border of Brussels (Europe).

<!DOCTYPE html>
<html lang="en-US">
 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::Maps ::</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao"></script>
    <script type="text/javascript">
        var map;

        //COORDS
        var brussels = [
        new google.maps.LatLng(50.835866,4.258575),
        new google.maps.LatLng(50.818083,4.244499),
        new google.maps.LatLng(50.811358,4.276428),
        new google.maps.LatLng(50.813094,4.302177),
        new google.maps.LatLng(50.773162,4.338226),
        new google.maps.LatLng(50.764259,4.384918),
        new google.maps.LatLng(50.793132,4.482422),
        new google.maps.LatLng(50.810274,4.450836),
        new google.maps.LatLng(50.821120,4.476585),
        new google.maps.LatLng(50.852342,4.462852),
        new google.maps.LatLng(50.866861,4.421310),
        new google.maps.LatLng(50.895021,4.430580),
        new google.maps.LatLng(50.911692,4.413757),
        new google.maps.LatLng(50.912342,4.395561),
        new google.maps.LatLng(50.898486,4.377708),
        new google.maps.LatLng(50.900868,4.328957),
        new google.maps.LatLng(50.889174,4.293251),
        new google.maps.LatLng(50.880294,4.297028),
        new google.maps.LatLng(50.861878,4.279175),
        new google.maps.LatLng(50.855593,4.288788),
        new google.maps.LatLng(50.837817,4.282608),
        new google.maps.LatLng(50.835866,4.259605)
        ];

        $(document).ready(function () {
            //WHERE TO CENTER YOUR MAP
            var latlng = new google.maps.LatLng(50.834999,4.387665);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var BrusselsHightlight;

            //DRAW THE POLYGON OR POLYLINE
            BrusselsHightlight = new google.maps.Polygon({
                paths: brussels,
                strokeColor: "#6666FF",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#6666FF",
                fillOpacity: 0.35
            });
            BrusselsHightlight.setMap(map);

        });

    </script>
    <style type="text/css">
        html,body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas {
            width:600px;
            height:400px;
        }       
    </style>
</head>
<body >
<div id="map_canvas">

</div>
<!--main-->
<div id="map_cord"></div>
</body> 
</html>

This worked really great for me.


The outlines you see there come from twitter, they must have stored them.

Take a look at the json-file that is requested when you call the twitter-page: http://api.twitter.com/1/geo/id/c3f37afa9efcf94b.json

I've tried it, geometry.coordinates[0][0] defines a fine polygon(guess the outline for Austin).

When you try it, notice that the order of the pair is lng,lat not lat,lng

So the twitter-geo-API may be a good start for implementing the outlines, fortunately twitter supports JSONP for a clientside solution.

See an example: http://jsfiddle.net/doktormolle/MRYm3/

<edit>

the twitter-API has been changed, the example didn't work anymore(authentication is required)

</edit>


As there is no yet solution offered by the Maps API and manually filling in coordinates is nobody's business, here's a gem of an alternative. Found this answer on the GIS website--absolute lifesaver (would've saved jurihandl a LOT of minutes drawing Calgary, above ;D):

You can get polygon coordinates in json for using with googlemaps using openstreetmap. Go to http://nominatim.openstreetmap.org/. Search a place like "San Francisco, CA"

Click on "Details"

Look for OSM ID and copy it (control+c), example: 2018776

Paste the ID http://polygons.openstreetmap.fr/index.py and download the JSON file

Source: GIS

Tags:

Google Maps

Google Maps Api 3

Recent Posts