Google Maps how to Show city or an Area outline

Question

How to show the places or Area outline just like the below sites does: [I enter an area and it shows the clear border for that area.]

Link

I have searched for hours in the official maps docs and there was no clue how these website are showing the area borders. Also looked at some old questions and read its not possible then.

User · Accepted Answer

From what I searched  at this moment there is no option from Google in the Maps API v3 and there is an issue on the Google Maps API going back to 2008  There are some older questions - Add  quot Search Area quot  outline onto google maps result   Google has started highlighting search areas in Pink color  Is this feature available in Google Maps API 3  and you might find some newer answers here with updated information  but this is not a feature  What you can do is draw shapes on your map - but for this you need to have the coordinates of the borders of your region  Now  in order to get the administrative area boundaries  you will have to do a little work  http   www gadm org country  if you are lucky and there is enough level of detail available there   On this website you can locally download a file  there are many formats available  with the  kmz extension  Unzip it and you will have a  kml file which contains most administrative areas  cities  villages      lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot    gt   lt kml xmlns  quot http   www opengis net kml 2 2 quot  gt   lt Document id  quot root doc quot  gt   lt Schema name  quot x quot  id  quot x quot  gt       lt SimpleField name  quot ID 0 quot  type  quot int quot  gt  lt  SimpleField gt       lt SimpleField name  quot ISO quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot NAME 0 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot ID 1 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot NAME 1 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot ID 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot NAME 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot TYPE 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot ENGTYPE 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot NL NAME 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot VARNAME 2 quot  type  quot string quot  gt  lt  SimpleField gt       lt SimpleField name  quot Shape Length quot  type  quot float quot  gt  lt  SimpleField gt       lt SimpleField name  quot Shape Area quot  type  quot float quot  gt  lt  SimpleField gt   lt  Schema gt   lt Folder gt  lt name gt x lt  name gt     lt Placemark gt       lt Style gt  lt LineStyle gt  lt color gt ff0000ff lt  color gt  lt  LineStyle gt  lt PolyStyle gt  lt fill gt 0 lt  fill gt  lt  PolyStyle gt  lt  Style gt       lt ExtendedData gt  lt SchemaData schemaUrl  quot  x quot  gt           lt SimpleData name  quot ID 0 quot  gt 186 lt  SimpleData gt           lt SimpleData name  quot ISO quot  gt ROU lt  SimpleData gt           lt SimpleData name  quot NAME 0 quot  gt Romania lt  SimpleData gt           lt SimpleData name  quot ID 1 quot  gt 1 lt  SimpleData gt           lt SimpleData name  quot NAME 1 quot  gt Alba lt  SimpleData gt           lt SimpleData name  quot ID 2 quot  gt 1 lt  SimpleData gt           lt SimpleData name  quot NAME 2 quot  gt Abrud lt  SimpleData gt           lt SimpleData name  quot TYPE 2 quot  gt Comune lt  SimpleData gt           lt SimpleData name  quot ENGTYPE 2 quot  gt Commune lt  SimpleData gt           lt SimpleData name  quot VARNAME 2 quot  gt Oras Abrud lt  SimpleData gt           lt SimpleData name  quot Shape Length quot  gt 0 2792904164402 lt  SimpleData gt           lt SimpleData name  quot Shape Area quot  gt 0 00302673357146115 lt  SimpleData gt       lt  SchemaData gt  lt  ExtendedData gt         lt MultiGeometry gt  lt Polygon gt  lt outerBoundaryIs gt  lt LinearRing gt  lt coordinates gt 23 117561340332031 46 269237518310547 23 108898162841797 46 265365600585937 23 107486724853629 46 264305114746207 23 104681015014762 46 260105133056641 23 101633071899471 46 250000000000114 23 100803375244254 46 249053955078239 23 097520828247184 46 246582031250114 23 0965576171875 46 245487213134822 23 095674514770508 46 244930267334098 23 092174530029354 46 243438720703182 23 088010787963924 46 240383148193473 23 083366394043082 46 238204956054801 23 075212478637809 46 234935760498047 23 071325302123967 46 239696502685547 23 070602416992131 46 241668701171875 23 069700241088924 46 242824554443416 23 068435668945369 46 243541717529354 23 066627502441406 46 244037628173771 23 064964294433651 46 246234893798885 23 062850952148437 46 247486114501953 23 0626220703125 46 248153686523438 23 062761306762752 46 250873565673942 23 061862945556697 46 255172729492301 23 061449050903434 46 256267547607422 23 05998420715332 46 258060455322322 23 057676315307674 46 259838104248161 23 055141448974666 46 262714385986442 23 053401947021484 46 264244079589901 23 049621582031193 46 266674041748161 23 043565750122013 46 268516540527457 23 041521072387695 46 269458770751953 23 034791946411076 46 270542144775334 23 027051925659293 46 27105712890625 23 025453567504826 46 271255493164063 23 022710800170898 46 272083282470703 23 020351409912053 46 271331787109432 23 018688201904297 46 270687103271598 23 015596389770508 46 270793914794922 23 014116287231502 46 271579742431697 23 009817123413143 46 275333404541016 23 006668090820426 46 277061462402401 23 004106521606445 46 279254913330135 23 001775741577205 46 282882690429688 23 005559921264648 46 283077239990348 23 009967803955135 46 28415679931652 23 014947891235465 46 286224365234489 23 019996643066463 46 28900146484375 23 024263381958121 46 292709350586051 23 027633666992301 46 295299530029411 23 028041839599609 46 295692443847656 23 032444000244197 46 294342041015625 23 03491401672369 46 293315887451229 23 044847488403434 46 290401458740234 23 047790527343807 46 28928375244152 23 053009033203239 46 288627624511719 23 057231903076229 46 288341522216797 23 064565658569393 46 287548065185547 23 070388793945426 46 286254882812614 23 075139999389592 46 284847259521428 23 075983047485465 46 284801483154411 23 085800170898494 46 28253173828125 23 098115921020451 46 280982971191406 23 099718093872127 46 280590057373104 23 105833053588981 46 278388977050838 23 112155914306641 46 274082183837947 23 116207122802791 46 270610809326172 23 117561340332031 46 269237518310547 lt  coordinates gt  lt  LinearRing gt  lt  outerBoundaryIs gt  lt  Polygon gt  lt  MultiGeometry gt     lt  Placemark gt   lt  Folder gt   lt  Document gt  lt  kml gt   From this point on  when the user searches for a city village  you simply  retrieve the boundaries and draw around those coordinates on the map - https   developers google com maps documentation javascript overlays Polygons I hope this helps you  Good luck   UPDATE  I made the borders of this city using the coordinates above                    var ctaLayer   new google maps KmlLayer                          url   https   www dropbox com s 0grhlim3q4572jp ROU adm2 20- 20Copy kml dl 1          ctaLayer setMap map     I put a small kml file on my Dropbox containing the borders of  a single city  Note that this uses the Google  built in KML system  in which it their server gets the file  computes the view and spits it back to you - it has limited usage and I used it to show you how the borders look  In your application you should be able to parse the coordinates from the kml file  put them in an array  as the polygon documentation tells you - https   developers google com maps documentation javascript examples polygon-arrays   and display them  Note that there will be differences between the borders that Google sets on http   www google com maps and the borders that you will get with this data  Good luck   UPDATE  http   pastebin com x2V1aarJ   http   pastebin com Gh55EDW5  These are the javascript files  they were minified  so I used an online tool to make them readable  from the website  If you are not fully satisfied with this my solution  feel free to study them  Best of luck

User · Answer

so I have a solution that isn t perfect but it worked for me  Use the polygon example from Google  and use the pinpoint on Google Maps to get lat  amp  long locations   Calgary pinpoint  I used what I call  ocular copy  amp  paste  where you look at the screen and then write in the numbers you want  -    lt style gt     map       height  500px       lt  style gt   lt script gt      This example creates a simple polygon representing the host city of the     Greatest Outdoor Show On Earth    function initMap        var map   new google maps Map document getElementById  map            zoom  9        center   lat  51 039  lng  -114 204         mapTypeId   terrain                  Define the LatLng coordinates for the polygon s path      var triangleCoords            lat  51 183  lng  -114 234          lat  51 154  lng  -114 235          lat  51 156  lng  -114 261          lat  51 104  lng  -114 259          lat  51 106  lng  -114 261          lat  51 102  lng  -114 272          lat  51 081  lng  -114 271          lat  51 081  lng  -114 234          lat  51 009  lng  -114 236          lat  51 008  lng  -114 141          lat  50 995  lng  -114 142          lat  50 998  lng  -114 160          lat  50 984  lng  -114 163          lat  50 987  lng  -114 141          lat  50 979  lng  -114 141          lat  50 921  lng  -114 141          lat  50 921  lng  -114 210          lat  50 893  lng  -114 210          lat  50 892  lng  -114 140          lat  50 888  lng  -114 139          lat  50 878  lng  -114 094          lat  50 878  lng  -113 994          lat  50 840  lng  -113 954          lat  50 854  lng  -113 905          lat  50 922  lng  -113 906          lat  50 935  lng  -113 877          lat  50 943  lng  -113 877          lat  50 955  lng  -113 912          lat  51 183  lng  -113 910                 Construct the polygon      var bermudaTriangle   new google maps Polygon         paths  triangleCoords        strokeColor    FF0000         strokeOpacity  0 8        strokeWeight  2        fillColor    FF0000         fillOpacity  0 35             bermudaTriangle setMap map        lt  script gt     lt div id  map  gt  lt  div gt   lt script async defer src  https   maps googleapis com maps api jskey YOUR API KEY amp callback initMap  gt   lt  script gt    This gets you the outline for Calgary  I ve attached an image here

User · Answer

i was looking for the same and found the answer,

solution is to use the styled map, on below link you can create your custom styles through wizard and test is at the same time google map style wizard

you can check all available options : here

here is my sample code which creates boundary for states and hide all the road and there labels.

    var styles = [
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" },
      { "weight": 2.5 },
      { "color": "#24b0e2" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

  var  geocoder = new google.maps.Geocoder();
   geocoder.geocode({
       'address': "rajasthan"
   }, (results, status)=> {
     var mapOpts = {
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       scaleControl: true,
       scrollwheel: false,
       styles:styles,
       center: results[0].geometry.location,
       zoom:6
     }
     map = new google.maps.Map(document.getElementById("map"), mapOpts);
   });

User · Answer

use this code    lt iframe width  600  height  450  frameborder  0  style  border 0  src  https   www google com maps embed v1 place q place id ChIJ5Rw5v9dCXz4R3SUtcL5ZLMk amp key      allowfullscreen gt  lt  iframe gt

User · Answer

I have try twitter geo api  failed   Google map api  failed   so far  no way you can get city limit by any api   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

[google-maps] Google Maps how to Show city or an Area outline

The answer is

Examples related to google-maps

Examples related to google-maps-api-3

Tags