json open data in google maps - json
this is a google example. Why I can't just change the https://storage.googleapis.com/maps-devrel/google.json
in
http://datasets.antwerpen.be/v4/gis/lezafbakening.json
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script> // api key is ok
</body>
</html>
The URL https://storage.googleapis.com/maps-devrel/google.json doesn't work on jsfiddle, it returns an error:
XMLHttpRequest cannot load https://storage.googleapis.com/maps-devrel/google.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
The comment in the code:
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
indicates a potential issue.
However, with your json, I get a different error: Uncaught InvalidValueError: not a Feature or FeatureCollection
Your JSON is not valid GeoJSON for the DataLayer, as indicated in the error, there is no top level Feature or FeatureCollection. You can use http://geojsonlint.com/ to check your GeoJSON.
Your JSON:
{"paging":{"records":1,"pages":1,"pageCurrent":1,"pageNext":null,"pagePrev":null,"pageSize":1},"data":[{"id":"2","objectid":"1","geometry":"{\"type\":\"Polygon\",\"coordinates\":[[[4.3752648501046,51.235671109447],[4.3768261156089,51.235987379867],[4.378205111297,51.236258380179],[4.3793189154647,51.236424751374],[4.381175249257,51.236619570007],[4.3821299391582,51.236714586479],[4.3826224317521,51.236738309085],[4.3847741845381,51.236652409815],[4.3870320006657,51.236566455329],[4.3905641334774,51.236418346457],[4.3933355001615,51.236027810783],[4.3953204030054,51.235751501796],[4.3964719325386,51.235580002999],[4.397631024507,51.235398977832],[4.3989492000278,51.235198875137],[4.4004535188848,51.235118174476],[4.4024418721928,51.235102784205],[4.4025175087519,51.235345894895],[4.4032165369956,51.235338394238],[4.403406877327,51.235341114003],[4.4044813217503,51.23533389126],[4.4047722441325,51.235316678533],[4.4050631360141,51.235259511945],[4.4053904063446,51.235219455944],[4.4057540767169,51.235219340598],[4.4060359480456,51.235253495989],[4.4064318055827,51.235325580515],[4.4067051745177,51.236067480356],[4.4067816576535,51.236932157158],[4.408069417218,51.236957496301],[4.4085517807897,51.236992303044],[4.4085551128357,51.237861034679],[4.408897111612,51.237856366303],[4.4092133965522,51.237852607418],[4.4092596122389,51.237690514702],[4.409307498352,51.237005585527],[4.4115683830778,51.23698955552],[4.4146387269243,51.236929323909],[4.4178627148587,51.236828131985],[4.4186098703507,51.236911526049],[4.4188646220169,51.237071229427],[4.4188672599631,51.239491250744],[4.4190314627796,51.239982033231],[4.4194137832192,51.240369984415],[4.4197606223084,51.241327202393],[4.4197599521063,51.244000523224],[4.4205172754282,51.244181323957],[4.4206091889183,51.241231702419],[4.4208346952824,51.240248765404],[4.4239856975874,51.239296052026],[4.4291989404206,51.237378040829],[4.4309529952883,51.236590954855],[4.4322857553331,51.236057528816],[4.4324665414776,51.235296416762],[4.4327679095033,51.234078628712],[4.436063118197,51.231371154144],[4.4407546751814,51.228481674736],[4.44120602428,51.22818010735],[4.4449082376716,51.225601039185],[4.4480856719633,51.22325880169],[4.4488521236098,51.222556237324],[4.4496988898229,51.221661459484],[4.4499856403436,51.221052446033],[4.4499841360901,51.220196300884],[4.4497406856796,51.219578141436],[4.4490960462471,51.218863231728],[4.4482711707646,51.21841754446],[4.4478124066088,51.218446560163],[4.4476047941564,51.218436171014],[4.4473409671726,51.218282241199],[4.4465018827972,51.217536531639],[4.4464444676391,51.217437697284],[4.4462759440588,51.217284112586],[4.4461596772113,51.217080469962],[4.4461987803246,51.216017691801],[4.4460096186879,51.215629069783],[4.4458998017019,51.215172529991],[4.4458619363702,51.214265038019],[4.4457245572314,51.21362587134],[4.4456150799702,51.213369098295],[4.4457077035225,51.213323575876],[4.4459692357575,51.213051666847],[4.4460414843154,51.212946451114],[4.4460555820161,51.212803604147],[4.4459134415878,51.212455676999],[4.4444398889796,51.21121559864],[4.4431105114184,51.209946119322],[4.4412911154577,51.208651620335],[4.4411250282473,51.208450147598],[4.4409633829374,51.208257993778],[4.4408338748643,51.208138270327],[4.4405074092184,51.207196648078],[4.4403139697453,51.206792532104],[4.4392685134801,51.20512551562],[4.4382214909318,51.203699222971],[4.4373568079363,51.202655228227],[4.43611967855,51.201617148595],[4.4356150571515,51.201398473887],[4.4352188950159,51.201111207417],[4.4336272002478,51.199386853112],[4.4316990046185,51.197755508874],[4.4305346060729,51.196568930064],[4.4297055465229,51.195697336797],[4.4279776861848,51.194223737353],[4.4251145478916,51.19278871644],[4.4229996956955,51.19199563967],[4.4224273098666,51.191816134623],[4.4214992681335,51.1916533261],[4.4202183954108,51.19153403692],[4.4190423885719,51.191535797781],[4.4179676825585,51.191669436356],[4.4168022058999,51.191869692949],[4.4155308072131,51.192127056631],[4.4138336135775,51.192278683437],[4.4131887215169,51.192307469942],[4.4131069988229,51.192336040472],[4.4130154137208,51.192460312423],[4.4129437123685,51.192558702488],[4.4127539885049,51.192560973884],[4.4125268950846,51.192552498028],[4.4121726245213,51.192535507749],[4.4117547664856,51.192512832248],[4.4111597627351,51.192470243105],[4.4103694543615,51.192413451835],[4.4102094712823,51.192417017217],[4.4101550224844,51.192474113518],[4.410146021469,51.192565439747],[4.4101879567986,51.192601870419],[4.4102460112475,51.192645311734],[4.410636615664,51.192662294703],[4.4113996782541,51.192719094179],[4.4119719687152,51.192753129021],[4.4126583461522,51.192773005266],[4.41260155662,51.193222450938],[4.4125457884412,51.193314469081],[4.4124822741906,51.19338869291],[4.4124177359844,51.193466425291],[4.4123279455402,51.193485781506],[4.4122098601339,51.193488679528],[4.4120735954988,51.193477314988],[4.4118463780423,51.193446466435],[4.4117545578829,51.19338676476],[4.4116783633304,51.193374723174],[4.4113967765649,51.193380534468],[4.4112605230138,51.19338058436],[4.4110561190163,51.19335497432],[4.4107835662046,51.193306557837],[4.4104110419768,51.193198244981],[4.4100430598058,51.193089930231],[4.4097341107293,51.192967324307],[4.4095477951414,51.192850382265],[4.4093933065071,51.192773381715],[4.4090798973029,51.192739244799],[4.4087892519638,51.192767883779],[4.4084713742432,51.192819362114],[4.4082443393368,51.192879371165],[4.4080763415987,51.192933651214],[4.4078937014555,51.193000005696],[4.4075395933969,51.193177062852],[4.4073681097867,51.193267788657],[4.4071229839703,51.193424832237],[4.4068042336086,51.193668169118],[4.4064955595904,51.193873746621],[4.4062287379716,51.194021578574],[4.4060425733344,51.1940844231],[4.4058382370147,51.194144419299],[4.4056384296733,51.194187290647],[4.4053523287557,51.194233043664],[4.4050026238094,51.194258838092],[4.4047437483963,51.194273187953],[4.4044439789519,51.194267572949],[4.4040760873504,51.194267685651],[4.403744535086,51.194273493925],[4.4035301299881,51.194361834338],[4.4031986844239,51.194542573037],[4.402989799831,51.194599712708],[4.4025999728403,51.194609462046],[4.4020885475982,51.194610172207],[4.4017634581421,51.194565821842],[4.40140866483,51.194491801707],[4.4012274083518,51.194417573726],[4.4010911503319,51.194417611893],[4.4006279735531,51.19455472488],[4.3998923674121,51.194823187368],[4.3932169099339,51.197027966398],[4.3918379736335,51.197508946249],[4.3904103234081,51.197993129819],[4.3905221151741,51.198135430202],[4.3905376394212,51.198267075018],[4.3904196130627,51.198421204647],[4.3905923119739,51.198609525125],[4.3901284358701,51.199133196955],[4.389982786503,51.199051905442],[4.3898021162039,51.198963549869],[4.389738668055,51.199277484483],[4.3898569468633,51.199654170046],[4.3900115978478,51.200099340747],[4.3902286752797,51.200629797241],[4.3902773319835,51.201055961398],[4.3901928517152,51.201718068631],[4.3900961160204,51.202083378338],[4.3899025459966,51.202616131028],[4.3895149061023,51.202623811657],[4.3884251178987,51.202751646755],[4.3866281424585,51.20348522578],[4.3862419333132,51.203754939235],[4.3850817706146,51.203496651029],[4.3827713606488,51.202681361057],[4.3810298543787,51.202182143306],[4.3786827633643,51.201944557526],[4.3771307214505,51.202063596882],[4.3742992133725,51.202591740357],[4.3730499809217,51.202667902226],[4.3726108555936,51.202686945807],[4.3725490606787,51.202731569532],[4.3723988778732,51.202848671271],[4.3719875998739,51.203929179743],[4.370170644135,51.207734339811],[4.3696163810059,51.208577387731],[4.3695282175263,51.208674573555],[4.3656342985698,51.21195435712],[4.3636752689093,51.213314978704],[4.3620899698605,51.21443706027],[4.3616588782739,51.214913630984],[4.3612346173258,51.216036111675],[4.3611436077073,51.21691127921],[4.3611434722878,51.217824502307],[4.3613250768669,51.218947015929],[4.3615636491123,51.219728699372],[4.3618080298616,51.219863652548],[4.3623246824206,51.220069570377],[4.3634759216251,51.220145722594],[4.3658390083714,51.22018384201],[4.3662393796012,51.220425501667],[4.3661722319786,51.221001942045],[4.365459381213,51.227330564055],[4.3657942659482,51.227814390233],[4.3681732082717,51.230192023882],[4.3694689275775,51.231627742777],[4.3709612147244,51.23296969268],[4.3727189922203,51.234225310445],[4.3752648501046,51.235671109447]]]}","gisid":"LEZ_01","naam":"Lage-emissiezone (LEZ)","shape":null,"shape_area":"22810825.358015","shape_len":"20944.458705765"}]}
This piece of your GeoJson is valid according to geojsonlint.com, but isn't a Feature or FeatureCollection, so doesn't work with the Google Maps Javascript API v3 DataLayer:
{"type":"Polygon","coordinates":[[[4.3752648501046,51.235671109447],[4.3768261156089,51.235987379867],[4.378205111297,51.236258380179],[4.3793189154647,51.236424751374],[4.381175249257,51.236619570007],[4.3821299391582,51.236714586479],[4.3826224317521,51.236738309085],[4.3847741845381,51.236652409815],[4.3870320006657,51.236566455329],[4.3905641334774,51.236418346457],[4.3933355001615,51.236027810783],[4.3953204030054,51.235751501796],[4.3964719325386,51.235580002999],[4.397631024507,51.235398977832],[4.3989492000278,51.235198875137],[4.4004535188848,51.235118174476],[4.4024418721928,51.235102784205],[4.4025175087519,51.235345894895],[4.4032165369956,51.235338394238],[4.403406877327,51.235341114003],[4.4044813217503,51.23533389126],[4.4047722441325,51.235316678533],[4.4050631360141,51.235259511945],[4.4053904063446,51.235219455944],[4.4057540767169,51.235219340598],[4.4060359480456,51.235253495989],[4.4064318055827,51.235325580515],[4.4067051745177,51.236067480356],[4.4067816576535,51.236932157158],[4.408069417218,51.236957496301],[4.4085517807897,51.236992303044],[4.4085551128357,51.237861034679],[4.408897111612,51.237856366303],[4.4092133965522,51.237852607418],[4.4092596122389,51.237690514702],[4.409307498352,51.237005585527],[4.4115683830778,51.23698955552],[4.4146387269243,51.236929323909],[4.4178627148587,51.236828131985],[4.4186098703507,51.236911526049],[4.4188646220169,51.237071229427],[4.4188672599631,51.239491250744],[4.4190314627796,51.239982033231],[4.4194137832192,51.240369984415],[4.4197606223084,51.241327202393],[4.4197599521063,51.244000523224],[4.4205172754282,51.244181323957],[4.4206091889183,51.241231702419],[4.4208346952824,51.240248765404],[4.4239856975874,51.239296052026],[4.4291989404206,51.237378040829],[4.4309529952883,51.236590954855],[4.4322857553331,51.236057528816],[4.4324665414776,51.235296416762],[4.4327679095033,51.234078628712],[4.436063118197,51.231371154144],[4.4407546751814,51.228481674736],[4.44120602428,51.22818010735],[4.4449082376716,51.225601039185],[4.4480856719633,51.22325880169],[4.4488521236098,51.222556237324],[4.4496988898229,51.221661459484],[4.4499856403436,51.221052446033],[4.4499841360901,51.220196300884],[4.4497406856796,51.219578141436],[4.4490960462471,51.218863231728],[4.4482711707646,51.21841754446],[4.4478124066088,51.218446560163],[4.4476047941564,51.218436171014],[4.4473409671726,51.218282241199],[4.4465018827972,51.217536531639],[4.4464444676391,51.217437697284],[4.4462759440588,51.217284112586],[4.4461596772113,51.217080469962],[4.4461987803246,51.216017691801],[4.4460096186879,51.215629069783],[4.4458998017019,51.215172529991],[4.4458619363702,51.214265038019],[4.4457245572314,51.21362587134],[4.4456150799702,51.213369098295],[4.4457077035225,51.213323575876],[4.4459692357575,51.213051666847],[4.4460414843154,51.212946451114],[4.4460555820161,51.212803604147],[4.4459134415878,51.212455676999],[4.4444398889796,51.21121559864],[4.4431105114184,51.209946119322],[4.4412911154577,51.208651620335],[4.4411250282473,51.208450147598],[4.4409633829374,51.208257993778],[4.4408338748643,51.208138270327],[4.4405074092184,51.207196648078],[4.4403139697453,51.206792532104],[4.4392685134801,51.20512551562],[4.4382214909318,51.203699222971],[4.4373568079363,51.202655228227],[4.43611967855,51.201617148595],[4.4356150571515,51.201398473887],[4.4352188950159,51.201111207417],[4.4336272002478,51.199386853112],[4.4316990046185,51.197755508874],[4.4305346060729,51.196568930064],[4.4297055465229,51.195697336797],[4.4279776861848,51.194223737353],[4.4251145478916,51.19278871644],[4.4229996956955,51.19199563967],[4.4224273098666,51.191816134623],[4.4214992681335,51.1916533261],[4.4202183954108,51.19153403692],[4.4190423885719,51.191535797781],[4.4179676825585,51.191669436356],[4.4168022058999,51.191869692949],[4.4155308072131,51.192127056631],[4.4138336135775,51.192278683437],[4.4131887215169,51.192307469942],[4.4131069988229,51.192336040472],[4.4130154137208,51.192460312423],[4.4129437123685,51.192558702488],[4.4127539885049,51.192560973884],[4.4125268950846,51.192552498028],[4.4121726245213,51.192535507749],[4.4117547664856,51.192512832248],[4.4111597627351,51.192470243105],[4.4103694543615,51.192413451835],[4.4102094712823,51.192417017217],[4.4101550224844,51.192474113518],[4.410146021469,51.192565439747],[4.4101879567986,51.192601870419],[4.4102460112475,51.192645311734],[4.410636615664,51.192662294703],[4.4113996782541,51.192719094179],[4.4119719687152,51.192753129021],[4.4126583461522,51.192773005266],[4.41260155662,51.193222450938],[4.4125457884412,51.193314469081],[4.4124822741906,51.19338869291],[4.4124177359844,51.193466425291],[4.4123279455402,51.193485781506],[4.4122098601339,51.193488679528],[4.4120735954988,51.193477314988],[4.4118463780423,51.193446466435],[4.4117545578829,51.19338676476],[4.4116783633304,51.193374723174],[4.4113967765649,51.193380534468],[4.4112605230138,51.19338058436],[4.4110561190163,51.19335497432],[4.4107835662046,51.193306557837],[4.4104110419768,51.193198244981],[4.4100430598058,51.193089930231],[4.4097341107293,51.192967324307],[4.4095477951414,51.192850382265],[4.4093933065071,51.192773381715],[4.4090798973029,51.192739244799],[4.4087892519638,51.192767883779],[4.4084713742432,51.192819362114],[4.4082443393368,51.192879371165],[4.4080763415987,51.192933651214],[4.4078937014555,51.193000005696],[4.4075395933969,51.193177062852],[4.4073681097867,51.193267788657],[4.4071229839703,51.193424832237],[4.4068042336086,51.193668169118],[4.4064955595904,51.193873746621],[4.4062287379716,51.194021578574],[4.4060425733344,51.1940844231],[4.4058382370147,51.194144419299],[4.4056384296733,51.194187290647],[4.4053523287557,51.194233043664],[4.4050026238094,51.194258838092],[4.4047437483963,51.194273187953],[4.4044439789519,51.194267572949],[4.4040760873504,51.194267685651],[4.403744535086,51.194273493925],[4.4035301299881,51.194361834338],[4.4031986844239,51.194542573037],[4.402989799831,51.194599712708],[4.4025999728403,51.194609462046],[4.4020885475982,51.194610172207],[4.4017634581421,51.194565821842],[4.40140866483,51.194491801707],[4.4012274083518,51.194417573726],[4.4010911503319,51.194417611893],[4.4006279735531,51.19455472488],[4.3998923674121,51.194823187368],[4.3932169099339,51.197027966398],[4.3918379736335,51.197508946249],[4.3904103234081,51.197993129819],[4.3905221151741,51.198135430202],[4.3905376394212,51.198267075018],[4.3904196130627,51.198421204647],[4.3905923119739,51.198609525125],[4.3901284358701,51.199133196955],[4.389982786503,51.199051905442],[4.3898021162039,51.198963549869],[4.389738668055,51.199277484483],[4.3898569468633,51.199654170046],[4.3900115978478,51.200099340747],[4.3902286752797,51.200629797241],[4.3902773319835,51.201055961398],[4.3901928517152,51.201718068631],[4.3900961160204,51.202083378338],[4.3899025459966,51.202616131028],[4.3895149061023,51.202623811657],[4.3884251178987,51.202751646755],[4.3866281424585,51.20348522578],[4.3862419333132,51.203754939235],[4.3850817706146,51.203496651029],[4.3827713606488,51.202681361057],[4.3810298543787,51.202182143306],[4.3786827633643,51.201944557526],[4.3771307214505,51.202063596882],[4.3742992133725,51.202591740357],[4.3730499809217,51.202667902226],[4.3726108555936,51.202686945807],[4.3725490606787,51.202731569532],[4.3723988778732,51.202848671271],[4.3719875998739,51.203929179743],[4.370170644135,51.207734339811],[4.3696163810059,51.208577387731],[4.3695282175263,51.208674573555],[4.3656342985698,51.21195435712],[4.3636752689093,51.213314978704],[4.3620899698605,51.21443706027],[4.3616588782739,51.214913630984],[4.3612346173258,51.216036111675],[4.3611436077073,51.21691127921],[4.3611434722878,51.217824502307],[4.3613250768669,51.218947015929],[4.3615636491123,51.219728699372],[4.3618080298616,51.219863652548],[4.3623246824206,51.220069570377],[4.3634759216251,51.220145722594],[4.3658390083714,51.22018384201],[4.3662393796012,51.220425501667],[4.3661722319786,51.221001942045],[4.365459381213,51.227330564055],[4.3657942659482,51.227814390233],[4.3681732082717,51.230192023882],[4.3694689275775,51.231627742777],[4.3709612147244,51.23296969268],[4.3727189922203,51.234225310445],[4.3752648501046,51.235671109447]]]}
UPDATE:
As you have a valid "geometry" in your JSON, you can read it in (assuming the cross-domain request is allowed) and add the pieces Google's Data Layer is looking for:
proof of concept fiddle
Empty object:
var polygon = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {}
}]
};
Code to read in the JSON and combine it with the above:
$.getJSON("http://datasets.antwerpen.be/v4/gis/lezafbakening.json", function(data) {
polygon.features[0].geometry = $.parseJSON(data.data[0].geometry);
map.data.addGeoJson(polygon);
});
code snippet:
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(19.87, -156),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// map.data.addGeoJson(polygon);
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "Antwerp"
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
$.getJSON("http://datasets.antwerpen.be/v4/gis/lezafbakening.json", function(data) {
polygon.features[0].geometry = $.parseJSON(data.data[0].geometry);
map.data.addGeoJson(polygon);
})
}
google.maps.event.addDomListener(window, "load", initialize);
var polygon = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {}
}]
};
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
Related
KML not shown when loaded with javascript API to google maps
I want to load a KML file with the API provided by GoogleMaps, but can't make it work.
I have a KML file that works correctly and displays all the points when loaded manually from my computer to GoogleMaps. However, when I try to do it with the API, it doesn't work. I uploaded my file to Google drive and I am using the example provided by Google (I only change coordinates, file and API key).
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.45, lng: -3.8}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
georssLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
});
georssLayer.setMap(map);
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
The link to Google Drive you are using does not provide the raw KML.
If I check the status of the KmlLayer after it loads, I get INVALID_DOCUMENT (fiddle, check the javascript console)
Per the article: Direct linking to your files on Dropbox, Google Drive and OneDrive:
Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:
https://drive.google.com/file/d/FILE_ID/edit?usp=sharing
Becomes:
https://drive.google.com/uc?export=download&id=FILE_ID
In your case:
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
becomes:
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
google.maps.event.addListener(georssLayer, 'status_changed', function() {
console.log(georssLayer.getStatus());
})
georssLayer.setMap(map);
}
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 async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
How To Display Multiple Markers Coordinates Stored In Firebase Database On Google Maps
I am trying to get the coordinates that are saved in the firebase real-time database and display them on a map using the google maps API. This is the code I have so far. Right now it opens and shows the users current location using the html5 geolocation API and it syncs the lat and long coordinates to the firebase real-time database using Geofire.
I don't know how to retrieve these points and have multiple points on the google map at the same time showing different users locations. If anyone could help me with this I would really appreciate it.
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Place this inside the HTML head; don't use async defer for now -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script>
var config = {
apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM",
authDomain: "carrier-35d7c.firebaseapp.com",
databaseURL: "https://carrier-35d7c.firebaseio.com",
projectId: "carrier-35d7c",
storageBucket: "carrier-35d7c.appspot.com",
messagingSenderId: "827792028763"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(locationsRef.push());
</script>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
var lat, lng;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
var pos = {lat: lat, lng: lng };
_setGeoFire();
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>
Related question:
How to retrieve data from Firebase using Javascript?
I only get one result from that database:
c20ej76jhb
45.546058,-122.813203
Using this code (uses on rather than once) with a reference to a database I created with multiple locations (and a different format of data):
var locationsRef = firebase.database().ref("locations");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
var marker = new google.maps.Marker({
position: {
lat: data.lat,
lng: data.lng
},
map: map
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(data.name + "<br>" + this.getPosition().toUrlValue(6) + "<br>" + data.message);
infowindow.open(map, this);
}
}(data)));
map.fitBounds(bounds);
});
proof of concept fiddle
from your database:
from mine (with multiple locations and the modified code above):
code snippet:
function initialize() {
var infowindow = new google.maps.InfoWindow();
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
});
// Initialize Firebase
var config = {
apiKey: "AIzaSyC8HcClvIT_FlG8ZwCji4LG-qNx8D9VCrs",
authDomain: "geocodeziptest.firebaseapp.com",
databaseURL: "https://geocodeziptest.firebaseio.com",
projectId: "geocodeziptest",
storageBucket: "geocodeziptest.appspot.com",
messagingSenderId: "1096545848604"
};
firebase.initializeApp(config);
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
var bounds = new google.maps.LatLngBounds();
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
console.log(data);
var marker = new google.maps.Marker({
position: {
lat: data.lat,
lng: data.lng
},
map: map
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(data.name + "<br>" + this.getPosition().toUrlValue(6) + "<br>" + data.message);
infowindow.open(map, this);
}
}(data)));
map.fitBounds(bounds);
});
}
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>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<div id="map_canvas"></div>
Google Maps Geocoding API returns undesired result after being passed zip code
I use the Google Maps Geocoding API. When I pass in the zip 75116, I get Paris, France. Specifically: 48.8585799, lon = 2.284701700000028. I should get Duncanville, Texas. This is the URL I'm using: https://maps.googleapis.com/maps/api/js?sensor=true&client=CLIENT-NAME&v=3.21 I tried appending this to the URL but it didn't work: &components=country:US
In the maps-Javascript-API the componentRestrictions must be passed along with the geocoderRequest
function init() {
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(0.0),
zoom: 13
}),
geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: '75116',
componentRestrictions: {
country: 'us'
}
},
function(r, s) {
if (s == google.maps.GeocoderStatus.OK) {
map.setCenter(r[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: r[0].geometry.location
});
} else {
window.alert('Geocode was not successful for the following reason: ' + s);
}
}
);
}
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&callback=init">
</script>
I can see two locations in the response for the "75116" geocoding request: Paris and Duncanville. Apparently, "75116" is not a unique location identifier. Requesting "US 75116" results in the single expectable location.
You have to use geocoder for getting address using zipcode:
Here sample code is provided:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtRkkKYEMY8CX1IbWbsAYLqzh-_pecegg&callback=initMap"
async defer></script>
<script>
var map;
function initMap() {
var geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(48.8585799, 2.284701700000028);
var mapOptions = {
center : myLatlng,
zoom : 17
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
geocoder.geocode({
address : '75116',
componentRestrictions: {
country: 'us'
}
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
// alert("no asdsd");
}
});
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
Google Maps API not drawing polylines
I am trying to learn how to use the Google Maps API, and I've found a lot of good tutorials. Problem is, whenever I try to implement their code into my local HTML file, I don't see any polyline drawn on my Google Map.
Here's my code (note: I do have my API key in the script at the bottom):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.500, lng: 9.000},
zoom: 10
});
}
var encoded_data = "kpgiI}{wt#{xeDfxv#ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se#vdgAhdPya_BoabDipHoabDngiAsen#jz}#htcAzqt#itcAnha#|~eBdzh#qqnBf~w#zrlCjkx#fppAy{u#zflA{zRpeuC`zWh`]bmx#}byAlwn#ny{DncNn}nDsxd#uqG";
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
var line = new google.maps.Polyline({
path: decode,
strokeColor: '#00008B',
strokeOpacity: 1.0,
strokeWeight: 4,
zIndex: 3
});
line.setMat(map);
lineArray.push(line);
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=MY_KEY&callback=initMap">
</script>
</body>
</html>
You are loading Google Maps API using:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
where
The async attribute lets the browser render the rest of your website
while the Maps API loads. When the API is ready, it will call the
function specified using the callback parameter
In the provided example you are trying to utilize google.maps.geometry.encoding.decodePath function but geometry library could not be loaded at this moment.
There is a typo at line:
line.setMat(map); -> line.setMap(map);
Fixed example
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 55.500, lng: 9.000 },
zoom: 7
});
var encoded_data = "kpgiI}{wt#{xeDfxv#ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se#vdgAhdPya_BoabDipHoabDngiAsen#jz}#htcAzqt#itcAnha#|~eBdzh#qqnBf~w#zrlCjkx#fppAy{u#zflA{zRpeuC`zWh`]bmx#}byAlwn#ny{DncNn}nDsxd#uqG";
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
var line = new google.maps.Polyline({
path: decode,
strokeColor: '#00008B',
strokeOpacity: 1.0,
strokeWeight: 4,
zIndex: 3
});
line.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>
How to get the state of a marker?
I am using the the Google Maps JavaScript API v3. I have a map that has markers on each state. When I click the state marker, I need access to the state abbreviation in the callback function. Is there any way native to google maps that I can access the state of a marker?
google.maps.event.addListener(mark,'click',function(event){
// how can I access the state abbreviation (e.g. 'MO') from in here?
}
I know that I can probably accomplish this via reverse geocoding, but is there any simpler (and less error-prone) way?
If this can only be accomplished using reverse geocoding, what is the simplest code to access the state? I assume my code would look something like this:
google.maps.event.addListener(mark,'click',function(event){
geocoder.geocode({'latLng': event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
... get state from results ...
}
}
}
What would be the simplest code to get the state from the results? Based on the documentation of the address component types, I assume I would be looking for the "short_name" of the "administrative_area_level_1". Is this correct? Is there an easier way to access it than looping over the results until I find the "administrative_area_level_1"? (I have jquery included on the page and so can code with it if it makes anything simpler)
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>http://stackoverflow.com/questions/17144375/how-to-get-the-state-of-a-marker?noredirect=1#comment24816710_17144375</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markers = [
{lat:54.60039, lng:-3.13632, state:"AA"},
{lat:54.36897, lng:-3.07561, state:"ZZ"},
];
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(54.42838,-2.9623),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker;
var infowindow = new google.maps.InfoWindow({
content: ''
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
map: map,
title:"marker " + i,
state: markers[i].state // a custom property of our own
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.state);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>