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
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),
});
});
Hey guys hoping for a little help here.
First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.
Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google's example page.
Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up :(
http://leongaban.com/_stack/googlemaps/
Please Help!
Goals:
Use my Google maps API key
Remove the Map view option buttons
Put overlay pointer on the location.
Code for my first map with my google API 2 key:
<head>
<title>Test Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// var myOptions = {
// zoom: 16,
// center: new google.maps.LatLng(40.750159, -73.976473),
// disableDefaultUI: true,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// }
// var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// var point = new GLatLng(40.750159, -73.976473);
// map.addOverlay(new GMarker(point));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.750159, -73.976473), 13);
map.setUIToDefault();
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
map.addOverlay(new GMarker(myGeographicCoordinates));
// map.addOverlay(new GMarker(40.750159, -73.976473));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
UPDATED
WORKING CODE! THANKS STACKERS!!!
<head>
<title>Test Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
There's a problem with how you define your latLng objects.
new GLatLng(40.750159, -73.976473);
That was used with Google Maps Api v2. Now you're using the latest api(v3), and in new api, this is how you should do it:
new google.maps.LatLng(40.750159, -73.976473);
EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:
var marker = new google.maps.Marker({
map: map,
position: latLng
});
Following code sets a map, disables default UI, sets a marker and put it on the map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates
});
}
Now that you have moved to the v3 API, you want to change your marker creation code from:
map.addOverlay(new GMarker(myGeographicCoordinates));
to:
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
If you want, you may also define a custom marker icon in the MarkerOptions that are passed to the marker constructor function and set the value equal to the path and name of an image file:
var marker = new google.maps.Marker({
map: map,
icon: "images/my-nice-marker.png",
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});