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

Prevent Google map marker from being clickable

I would like to know if there's a way to prevent a Google map marker from being clickable. I thought this is something that could be set up in the map options using the following code.
map_options: {
clickable: false,
},
I found this in a really old blog post:
http://www.technoreply.com/how-to-make-google-map-marker-non-clickable/
However I'm not sure if this option has been deprecated or not.

To prevent a marker from being clickable, set its clickable property to false (won't make much difference if you don't have something to handle the click event, except prevent the cursor from changing).
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
clickable: false
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Google Map call not working

So, I'm a little confused. I tried calling a google map with the api and tutorial provided here:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box.
Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...
<div id="map_canvas"></div>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.

I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:
try:
var map = new google.maps.Map(map_canvas, mapOptions);

If you are looking for your map to appear, start with this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:300;height:500">
<script>
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) };
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</div>
</body>
</html>

I think the main problem is the mapOptions is not included when the map is initialized.
it's supposed to be like this:
var map = new google.maps.Map(map_canvas, mapOptions);
~ try to read again the tutorial provided, it's defined that the 'center', 'zoom level', and 'map type' are required options.
Options for the map, such as the center, zoom level, and the map type.
There are many more options that can be set, but these three are required.

Understanding the code for the Google Maps API (Simple Maps), for implementing it into a website?

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I am trying to understand the javascript portion of this code under the script tag. What exactly is it doing, since the code is not commented out under the Google API.

The documentation has it all laid out pretty well: Google Maps Javascript API Documentation
var map;
Defines a variable named map.
function initialize() {..}
Defines function named intialize
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Sets up options for the map (zoom: how far the map is zoomed in on it's point. center: center of the map defined by latitude and longitude values passed. mapTypeID: the type of map you want the maps API to appear as (ROADMAP, SATELLITE, TERRAIN, HYBRID)

var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
This is setting various options for the map; the zoom level of the map, the initial coordinates of the map and the type of map to use (you can use roadmap, satellite or hybrid)
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
This creates the map object and adds it to your page.
google.maps.event.addDomListener(window, 'load', initialize);
This attaches an event listener to the window so that when it loads up the initialise function will run thereby creating the map.

Click to show google map in Javascript - Not working

This is the code im working from:
http://jsfiddle.net/X9SkK/
This is the javascript:
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
}​
I want to have it so that when I click the button the map loads, however it doesnt work for some reason. I am sure its something simple but I cant pinpoint it.

The code actually creating the map is wrapped in a function named initialize, which isn't being called. Remove that and you'll be fine:
function showmap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}​
Also, be sure to specify a fixed height (such as 400px) for your #map_canvas element, or it won't be visible in your jsFiddle.

Here is what you could have done:
<!-- Display Map -->
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
initialize();
}
The initialize(); function responsible for creating a map was never called. You have to call it inside your showmap function.
DEMO