How to display a specific city on Google Maps API?

Question

I searched a lot on the web and I found similar question, but unfortunately no one has solved the problem, so I opened my own question hoping someone with a solution.

Essentially I want display a specific city, in this case Milan located in Italy. I successfully initialized the map:

var myMap;
var myLatlng = new google.maps.LatLng(45.4627123, 9.1075212,12);
function initialize() {
    var mapOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    }
    myMap = new google.maps.Map(document.getElementById('worldMap'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: myMap,
        title: Lang.geolocation,
        icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

this display the map:

but I want display only the city of Milan like:

how can I do this?

ps: the last image comes from the plugin jvectormap

Answer 1

One option:

1. go to http://www.gadm.org/download, download the adm3 file for Italy (you can use other sources of data, Natural Earth had similar information)

2. Unzip that file, edit the contained KML to remove all the <Placemark>s that aren't Milan.

3. Combine that polygon (as the inner ring(s)) with a polygon that covers the whole earth (more details in my answer to the question: KML invert country border)

4. Display on the map using geoxml3 (example)

proof of concept fiddle

Code:

function initialize() {
  var map = new google.maps.Map(
  document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(45.468889,9.202216),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var geoXml = new geoXML3.parser({
    map: map,
    suppressInfoWindows: true,
    zoom: false, 
  });
  geoXml.parse("http://www.geocodezip.com/geoxml3_test/kml/Milano_inverted.kml");
}
google.maps.event.addDomListener(window, "load", initialize);

Working example

code snippet:

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(45.468889, 9.202216),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var geoXml = new geoXML3.parser({
    map: map,
    suppressInfoWindows: true,
    zoom: false,
  });
  // geoXml.parse("http://www.geocodezip.com/geoxml3_test/kml/Milano_inverted.kml");
  geoXml.parseKmlString(kmlStr);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmlStr = '<?xml version="1.0" encoding="utf-8" ?><kml xmlns="http://www.opengis.net/kml/2.2"><Document id="root_doc"><Style id="1"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>aa0000df</color><fill>1</fill></PolyStyle></Style><Folder><name>gadm36_ITA_3</name><Placemark><Style><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>ff000000</color><fill>1</fill></PolyStyle></Style><ExtendedData><SchemaData schemaUrl="#gadm36_ITA_3"><SimpleData name="NAME_0">Italy</SimpleData><SimpleData name="NAME_1">Lombardia</SimpleData><SimpleData name="NAME_2">Milano</SimpleData><SimpleData name="NAME_3">Milano</SimpleData> </SchemaData></ExtendedData><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>9.10490036010737,45.4479179382324 9.10482978820812,45.4478721618653 9.10039424896235,45.4478149414062 9.09962177276611,45.4483451843262 9.09641170501709,45.4506416320801 9.09614467620855,45.451229095459 9.09599494934088,45.4514236450196 9.09593772888195,45.4514999389648 9.09570121765142,45.4517974853517 9.09549236297619,45.4520301818848 9.09489631652843,45.4526901245118 9.09460258483898,45.4529914855958 9.09434413909912,45.4532127380372 9.09426498413086,45.453239440918 9.09405612945562,45.4533157348634 9.09324455261236,45.4535980224609 9.09290885925304,45.4537162780762 9.09101676940929,45.4540214538574 9.09048080444336,45.4541015624999 9.09013462066662,45.4541511535646 9.08921432495129,45.4541320800781 9.080719947815,45.4522209167481 9.0789098739624,45.4477500915527 9.07864856719971,45.4444999694824 9.08018970489502,45.4394035339356 9.07808780670177,45.4371185302736 9.07408618927002,45.4347419738769 9.07048130035412,45.4344635009765 9.05508518218994,45.4406852722168 9.05586814880377,45.4435005187989 9.05501174926763,45.4457740783693 9.0548992156983,45.4460754394532 9.05060005187994,45.4556503295898 9.0476131439209,45.4602508544922 9.0439071655274,45.4646644592286 9.04613780975336,45.4665298461914 9.05269336700439,45.462818145752 9.05469322204596,45.4623146057129 9.05588817596436,45.4622917175294 9.05607795715332,45.4622917175294 9.05623435974127,45.4622955322267 9.06781005859369,45.4639282226563 9.07191085815424,45.4654083251953 9.07532119750988,45.4712715148926 9.07441997528076,45.4788742065431 9.06786823272711,45.4873771667482 9.06106090545654,45.4951515197755 9.06095695495605,45.495231628418 9.060227394104,45.4957962036133 9.05761909484863,45.4985694885254 9.05471611022955,45.5046958923341 9.05492973327648,45.5057983398437 9.0555629730224,45.5059471130371 9.0563821792602,45.5061416625978 9.05720233917248,45.5062828063965 9.05750656127935,45.5063323974611 9.05772590637218,45.5063705444335 9.06138706207275,45.5054969787599 9.06151580810541,45.505313873291 9.06296062469482,45.5032539367676 9.06404113769531,45.5036163330079 9.06670093536383,45.504608154297 9.06956577301025,45.5061187744142 9.07011699676525,45.5064849853516 9.07027339935297,45.5067329406739 9.07330608367926,45.506217956543 9.07682800292969,45.4987754821778 9.0798130035401,45.4978408813477 9.0893611907959,45.4987678527833 9.09039878845221,45.4993171691895 9.09635734558117,45.5078887939453 9.09647941589361,45.514476776123 9.09559059143072,45.5173339843751 9.09402275085455,45.529697418213 9.09793758392334,45.5313110351564 9.10148334503185,45.5324668884277 9.09772491455089,45.5300521850586 9.09823703765875,45.5278854370118 9.10388946533203,45.5236549377441 9.11786079406738,45.5209617614746 9.12351512908941,45.5214385986328 9.12472534179693,45.5215721130371 9.12504768371593,45.5233001708986 9.12495708465576,45.5237197875976 9.13543319702143,45.5237884521484 9.15197467803961,45.5220947265626 9.15221405029303,45.524024963379 9.15255260467541,45.5251846313477 9.15367603302008,45.5267066955566 9.15854167938232,45.5333061218263 9.15954589843744,45.5343780517579 9.18017768859875,45.5362663269043 9.18135166168213,45.5350761413574 9.19005012512213,45.5280075073243 9.19876480102539,45.5282135009766 9.19961643219006,45.5283813476563 9.20019435882568,45.5284996032715 9.20676231384289,45.5302658081055 9.20718288421642,45.5288581848145 9.21243858337408,45.5292167663574 9.21731185913086,45.5277214050294 9.22118663787853,45.5243263244629 9.22252464294439,45.5243606567383 9.22428226470947,45.5244560241699 9.2262229919433,45.5245132446289 9.23199844360352,45.5240821838379 9.23409271240246,45.522216796875 9.23867034912121,45.5196380615235 9.23926734924322,45.5197410583497 9.24204254150396,45.5202217102051 9.25066566467291,45.5209350585938 9.25641536712641,45.521354675293 9.25634860992432,45.5204772949218 9.25646686553961,45.5198249816895 9.25790786743164,45.5191688537598 9.25852584838873,45.5191841125489 9.25985240936285,45.5198249816895 9.25968837738037,45.5199737548828 9.26940345764166,45.5177230834962 9.27567672729492,45.5071907043458 9.27896308898937,45.5065002441407 9.27864646911627,45.5045547485352 9.27707672119141,45.5035057067872 9.27525901794445,45.5028915405275 9.27294158935553,45.5029335021973 9.27283191680908,45.5030937194824 9.27271366119385,45.5032653808595 9.27280807495117,45.5036354064941 9.27289581298828,45.5039749145508 9.2731819152832,45.5047950744629 9.2735586166383,45.5060348510742 9.27361297607416,45.5065383911134 9.27320384979254,45.5066947937012 9.27265357971203,45.5067481994629 9.27135181427008,45.5067825317383 9.26896762847906,45.5068473815917 9.262607574463,45.50541305542 9.26235675811768,45.5053367614746 9.26141834259039,45.50101852417 9.26138591766363,45.5007705688477 9.26061630249023,45.4909286499023 9.26034164428722,45.4850845336915 9.26202297210693,45.4723587036134 9.26241970062262,45.4723281860352 9.26304626464849,45.4723052978516 9.26472282409674,45.4724273681641 9.26648902893072,45.4725875854493 9.26740264892584,45.472728729248 9.26846790313726,45.4728965759277 9.26863479614263,45.4729461669923 9.26926803588879,45.4731292724611 9.26994705200195,45.4734268188477 9.27058696746838,45.473388671875 9.27242755889893,45.4732475280763 9.27249240875238,45.4731597900392 9.27284145355225,45.46932220459 9.27272319793695,45.4628448486329 9.27001667022711,45.4586715698243 9.26818943023687,45.4507217407227 9.26770973205578,45.4387130737305 9.26756858825689,45.4359817504882 9.267333984375,45.4357528686525 9.2668275833131,45.4352607727052 9.26639556884766,45.4348373413085 9.26466369628906,45.4331436157227 9.26309490203863,45.4322624206542 9.25835132598877,45.429656982422 9.24891757965094,45.4246711730957 9.2479887008667,45.4177398681641 9.24867820739752,45.4173545837403 9.2504234313966,45.4161987304688 9.25105094909662,45.4156951904297 9.25123786926275,45.4155464172363 9.24893093109142,45.4140586853028 9.24365234375011,45.4107475280762 9.24109172821045,45.4096832275391 9.2324790954591,45.4089546203614 9.2266263961792,45.4085311889648 9.22600269317638,45.409309387207 9.22517490386974,45.4100646972656 9.22449970245373,45.4104804992677 9.22391223907482,45.4108123779296 9.21886634826672,45.4085083007814 9.2172327041626,45.4046440124512 9.21694946289074,45.4039421081544 9.2158775329591,45.3979873657228 9.21021270751959,45.3962593078613 9.20955181121838,45.3938674926758 9.19857788085943,45.389461517334 9.19697856903088,45.3888244628907 9.19577693939203,45.3884391784668 9.19356346130377,45.388038635254 9.19213771820063,45.3892211914064 9.18358516693115,45.3915023803712 9.17397975921642,45.3954582214355 9.17409801483166,45.396396636963 9.17430877685547,45.3980674743653 9.17443370819097,45.3993797302247 9.17449283599854,45.4000015258789 9.17465496063244,45.4017028808594 9.17182445526117,45.4037628173828 9.16542720794689,45.4044647216798 9.16409969329828,45.4043426513672 9.16397285461437,45.4043273925781 9.15884113311773,45.4037895202638 9.1602401733399,45.4090156555176 9.1584205627442,45.4133682250977 9.15566635131836,45.4171028137208 9.14581298828119,45.4192276000977 9.13933372497559,45.4188041687012 9.13714027404785,45.4184303283692 9.13715267181402,45.4183540344238 9.137372970581,45.4181022644044 9.13891792297369,45.416316986084 9.13712024688732,45.415740966797 9.13667678833013,45.4156341552734 9.1344566345216,45.4151153564454 9.1340160369873,45.4154586791993 9.13258838653559,45.4169120788575 9.13229084014898,45.4251594543458 9.12772655487072,45.4304008483887 9.12312793731695,45.4362106323242 9.12146377563488,45.4383125305177 9.11631965637207,45.4447097778321 9.11198711395264,45.4498100280761 9.10764789581299,45.4503707885743 9.10490036010737,45.4479179382324</coordinates></LinearRing></innerBoundaryIs></Polygon></MultiGeometry></Placemark></Folder></Document></kml>'

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/polys/geoxml3.js"></script>

To restrict it to be always displayed on the map see this page from Mike Williams' v2 tutorial