• Drawing City Borders on Google Maps

    Posted on June 4, 2012 by in Javascript, Other Programming

    Drawing borders to city or state is simple and can be achieved using polygon overlays. As in mathematics, polygon is series of points connected by straight lines to form a closed region. In google maps, it is series of cordinates in an ordered sequence that form a closed group.

    The only part that is difficult in drawing a polygon to form a city border is to actually get the cordinates of the border of the city. I will list a few resources from where you can get the city co-ordinates for few cities later in the article, but first let us see a basic example of drawing a polygon.

    In this example let’s draw border for city of Newark,New Jersey,US.

    var map;
    	    var newarkcoords = [{ Longitude: "-74.2116099599969", Latitude: "40.696749000004" }, { Longitude: "-74.211095879996", ... { Longitude: "-74.2116099599969", Latitude: "40.696749000004"}];
    
    	    $(document).ready(function () {
    	        var latlng = new google.maps.LatLng(40.734184, -74.172679);
    	        var myOptions = {
    	            zoom: 13,
    	            center: latlng,
    	            mapTypeId: google.maps.MapTypeId.ROADMAP
    	        };
    	        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    	        var NewarkHighlight;
    	        var mNewarkCoords = new Array;
    
    	        for (var i = 0; i < newarkcoords.length; i++) {
    	            mNewarkCoords[i] = new google.maps.LatLng(newarkcoords[i].Latitude, newarkcoords[i].Longitude);
    	        }
    	        // Construct the polygon
    	        // Note that we don't specify an array or arrays, but instead just
    	        // a simple array of LatLngs in the paths property
    	        NewarkHighlight = new google.maps.Polygon({
    	            paths: mNewarkCoords,
    	            strokeColor: "#6666FF",
    	            strokeOpacity: 0.8,
    	            strokeWeight: 2,
    	            fillColor: "#6666FF",
    	            fillOpacity: 0.35
    	        });
    	        NewarkHighlight.setMap(map);
    
    	    });
    

    Drawing a polygon is pretty straight forward if you have coordinates, just pass the array of co-ordinates and specify border color, fill color,opacity etc.

    Listed below are links to sites, datasets which can used to draw borders as above. Please add in comments, if there are free/paid sources which i can list here, which might help others.

    World Border KML , you will find the cordinates of each country in KML format, it is publicly available google fusion table.

    US State Borders , This is KML provided by google which has borders for states of US.

    Newyork City , Cordinates for Manhattan,Bronx,Staten Island,Brooklyn and Queens.

    Chicago , Another publicly available fusion table with ward border for chicago.

    World Capitals , Data available for some of the world’s famous cities in kmz format.

    Data for some zipcodes (within US) available in KML format

    If you cordinates by zip code for parts of you US, you might find it here

    As you can see there is no specific place you can find the data, there are some sites that sell the data too, but before you go there you might want to try puclicly available google fusion tables and/or government/census websites that might provide the coordinates you are looking for. Happy Plotting!

    For downloading complete set google maps api examples, click the link below

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    One Responseso far.

    1. anton says:

      How to get the coordinates for the polygon of the desired city or country?

    Leave a Reply