How to hide context sidebar of Google Maps API Local Context Map - google-maps

Is there a way to hide the auto-generated ugly sidebar of Local Context Maps in the Google Maps Javascript API? I've looked through countless posts, but none mention how to hide it ...?
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [
{ type: "restaurant" },
{ type: "tourist_attraction" },
],
maxPlaceCount: 12,
});
map = localContextMapView.map;
map.setOptions({
center: { lat: 51.507307, lng: -0.08114 },
zoom: 14,
});
}


According to the documentation, set placeChooserViewSetup.layoutMode to HIDDEN
Example:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [{
type: "restaurant"
},
{
type: "tourist_attraction"
},
],
maxPlaceCount: 12,
placeChooserViewSetup: {
layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
}
});
proof of concept fiddle
code snippet:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [{
type: "restaurant"
},
{
type: "tourist_attraction"
},
],
maxPlaceCount: 12,
placeChooserViewSetup: {
layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
}
});
map = localContextMapView.map;
map.setOptions({
center: {
lat: 51.507307,
lng: -0.08114
},
zoom: 14,
});
}
/* 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;
}
<!DOCTYPE html>
<html>
<head>
<title>Local Context Basic</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" async></script>
</body>
</html>

Related

How to make the polyline change with the draggable route [duplicate]

This question already has answers here:
How to get a draggable waypoint's location from google directions result
(1 answer)
Google Maps API v3 - Directions with draggable alternate routes
(1 answer)
suppressMarkers and draggable for DirectionsRendererOptions Google Maps API
(1 answer)
How do I change the route provided to me by the directions API on web?
(1 answer)
Closed last month.
I am trying to create a polyline from the route. The route is draggable and it has waypoints. I am using the directions_changed event listener to draw the polyline so that whenever the route changes the polyline also changes. I am able to achieve all of this except then when I drag the route I get the new polyline but I also have the older polyline drawn on the route. Whenever the route is dragged I don't want the older polyline to appear along with the new polyline.
How can I achieve this?
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -24.345, lng: 134.46 }, // Australia.
});
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map,
panel: document.getElementById("panel"),
});
directionsRenderer.addListener("directions_changed", () => {
const directions = directionsRenderer.getDirections();
if (directions) {
computeTotalDistance(directions);
var polyline = new google.maps.Polyline(
{
path:google.maps.geometry.encoding.decodePath(directions.routes[0].overview_polyline),
map : map
}
)
if(polyline)
{
console.log(polyline)
polyline.setMap(map)
}
}
});
displayRoute(
"Perth, WA",
"Sydney, NSW",
directionsService,
directionsRenderer
);
}
function displayRoute(origin, destination, service, display) {
service
.route({
origin: origin,
destination: destination,
waypoints: [
{ location: "Adelaide, SA" },
{ location: "Broken Hill, NSW" },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
})
.then((result) => {
display.setDirections(result);
})
.catch((e) => {
alert("Could not display directions due to: " + e);
});
}
function computeTotalDistance(result) {
let total = 0;
const myroute = result.routes[0];
if (!myroute) {
return;
}
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}
window.initMap = initMap;

If you want to hide the old polyline, keep a reference to it (outside the scope of the directions_changed listener) and remove it from the map with polyline.setMap(null); before creating the new polyline:
if (polyline) {
// if polyline already exists, remove it from the map.
polyline.setMap(null)
}
polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(directions.routes[0].overview_polyline),
map: map
})
proof of concept fiddle
code snippet:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: {
lat: -24.345,
lng: 134.46
}, // Australia.
});
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map,
panel: document.getElementById("panel"),
});
let polyline;
directionsRenderer.addListener("directions_changed", () => {
const directions = directionsRenderer.getDirections();
if (directions) {
computeTotalDistance(directions);
if (polyline) {
// if polyline already exists, remove it from the map.
polyline.setMap(null)
}
polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(directions.routes[0].overview_polyline),
map: map
})
if (polyline) {
console.log(polyline)
polyline.setMap(map)
}
}
});
displayRoute(
"Perth, WA",
"Sydney, NSW",
directionsService,
directionsRenderer
);
}
function displayRoute(origin, destination, service, display) {
service
.route({
origin: origin,
destination: destination,
waypoints: [{
location: "Adelaide, SA"
},
{
location: "Broken Hill, NSW"
},
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
})
.then((result) => {
display.setDirections(result);
})
.catch((e) => {
alert("Could not display directions due to: " + e);
});
}
function computeTotalDistance(result) {
let total = 0;
const myroute = result.routes[0];
if (!myroute) {
return;
}
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 90%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Directions Service</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="total"></div>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>
</html>

Convert address into coordinates for Google Maps Local Context (Geocoding + Local Context Maps)

I am attempting to plug Google Maps Local Context into my website, and I am looking to use an address string (1234 Main St, City, State, USA) to center and display a marker on my map.
Here's the code I have that displays a simple map on the site, but I need help getting an address to work instead of coordinates.
I have to use Geocoder, but I need help tying it together with the Google Maps Local Context map.
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
const center = { lat: 37.4219998, lng: -122.0840572 };
map = localContextMapView.map;
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 14,
});
}
https://jsfiddle.net/cegytdj6/
code snippet:*
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
const center = {
lat: 37.4219998,
lng: -122.0840572
};
map = localContextMapView.map;
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
}
/* 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;
}
<!DOCTYPE html>
<html>
<head>
<title>Local Context Basic</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>

See the simple geocoder example for how to use the geocoder in the Google Maps Javascript API v3.
The code below will use the geocoder to return the coordinates for "1600 Amphitheatre Parkway, Mountain View, CA".
let geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: "1600 Amphitheatre Parkway, Mountain View, CA" }, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 14,
});
putting that into your existing code:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
map = localContextMapView.map;
let geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: "1600 Amphitheatre Parkway, Mountain View, CA"
}, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
updated fiddle
code snippet:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
map = localContextMapView.map;
let geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: "1600 Amphitheatre Parkway, Mountain View, CA"
}, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
/* 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;
}
<!DOCTYPE html>
<html>
<head>
<title>Local Context Basic</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>

Seems like you already have address and you just need to use geocoding API to convert the address into coordinates.
Inside of your script, you need to get geocoding API CDN with reloading the page. I will use axios to do that. Here is the code;
Add these two lines in the head of your HTML page.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
Now you can make AJAX request using axios.
Inside your script;
axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=Your_address&key=YOUR_API_KEY`)
.then(response => {
var lt = response.geometry.location.lat;
var ln = response.geometry.location.lng;
map.setCenter({lat: lt, lng:ln});
marker.setCenter({lat: lt, lng: ln});
})
.catch(error => {
console.log(error) //or whatever you want
})

How to fit a circle inside a Google Maps when using vue2-google-maps?

I found on this question that you can use fitBounds() to make a circle fit into a map. I tried to use it while using vue2-google-maps and it didn't work. How would be the equivalent for it while using this library?

For that matter Google Maps Circle object could be accessed via $refs attribute:
<GmapCircle
ref="circleRef"
:center="{ lat: 52.521248, lng: 13.399038 }"
:radius="400000"
:visible="true"
:options="{fillColor:'blue',fillOpacity:0.2}"
/>
and then map viewport set the circle bounds like this:
mounted: function() {
this.$refs.circleRef.$circlePromise.then(() => {
const {$circleObject} = this.$refs.circleRef; //get google.maps.Circle object
const map = $circleObject.getMap(); //get map instance
map.fitBounds($circleObject.getBounds());
})
}
Example
<template>
<div>
<GmapMap :center="center" :zoom="zoom">
<GmapCircle
ref="circleRef"
:center="{ lat: 52.521248, lng: 13.399038 }"
:radius="400000"
:visible="true"
:options="{fillColor:'blue',fillOpacity:0.2}"
></GmapCircle>
</GmapMap>
</div>
</template>
<script>
export default {
data() {
return {
zoom: 5,
center: { lat: 59.339025, lng: 18.065818 }
};
},
mounted: function() {
this.$refs.circleRef.$circlePromise.then(() => {
const {$circleObject} = this.$refs.circleRef; //get google.maps.Circle object
const map = $circleObject.getMap();
map.fitBounds($circleObject.getBounds());
})
}
};
</script>
<style>
.vue-map-container {
height: 640px;
}
</style>

json open data in google maps

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>

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>