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
One option:
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)
Unzip that file, edit the contained KML to remove all the <Placemark>s that aren't Milan.
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)
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
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing
I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.
The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.
Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});