We Keep Coding

How to display a specific city on Google Maps API?

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

Google Map marker not showing after uploading to server, locally works fine

I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.
I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.
Here's the script I'm using
/*GOOGLE MAPS*/
function initialize() {
// Declare map style
var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
var mapOptions = {
center: {lat: 46.211000, lng: 16.913157},
zoom: 13,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Change map style
map.setOptions({styles: grayscale});
var image = 'img/vemo-google-map-marker.png';
var marker = new google.maps.Marker({
position: {lat: 46.211000, lng: 16.913157},
map: map,
title: "VEMO TRADE d.o.o.",
icon: image,
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You need to specifiy whole absolute path here:
var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';

missing the pin on google map

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

Google Maps API - renders static map rather than dynamic

I am adding a google map to my site, and i've added exactly the same code as from the google maps api documentation but my map appears as a static map without marker (with the correct center point which is a good start) instead of a dynamic draggable map with marker and controllers.
Any ideas what I'm doing wrong? Code is below although I'm fairly sure the code is fine since it's straight from the google maps api site.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Google Maps: Overlay point not showing up

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
});