Related
I have a map that loads building footprints from GeoJSON. My map also uses Street View. Like all Google Maps, Street View is accessed via Pegman. When you click and drag Pegman, the geometries on my map are above the geometries from the Street View geometries.
I would like to know how, or if it's even possible, to place the Street View layer above the Data layer (the layer with GeoJSON shapes) so street, path, and 360 geometries from Street View are above the GeoJSON building footprint geometries.
I've scoured the Google Maps JavaScript API documentation and made numerous Google Searches and cannot find a thing about re-ordering layers as you can with OpenLayers and Leaflet.
Here is a screenshot of the issue. You can see a path and a 360 panorama partially covered by the GeoJSON geometry.
#Dr.Molle has an example of overlaying two maps in this related question: How to put Google Map labels on top?
If you do that and put the GeoJSON data on the lower map, the StreetView layer will be on top of the GeoJSON.
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {
lat: 40.7127753,
lng: -74.0159728
},
});
let map2 = new google.maps.Map(document.getElementById('map2'), {
mapTypeControl: false,
backgroundColor: 'hsla(0, 0%, 0%, 0)',
zoom: map.getZoom(),
styles: [{
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}],
center: map.getCenter(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.bindTo('center', map2, 'center');
map.bindTo('zoom', map2, 'zoom');
CSS:
.map {
width: 100%;
height: 100%;
background:transparent !important;
}
proof of concept fiddle
code snippet:
function initMap() {
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {
lat: 40.7127753,
lng: -74.0159728
},
});
let map2 = new google.maps.Map(document.getElementById('map2'), {
mapTypeControl: false,
backgroundColor: 'hsla(0, 0%, 0%, 0)',
zoom: map.getZoom(),
styles: [{
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}],
center: map.getCenter(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.bindTo('center', map2, 'center');
map.bindTo('zoom', map2, 'zoom');
// Load GeoJSON.
map.data.addGeoJson(JSON.parse(geoJson));
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
fillColor: "green",
fillOpacity: 1.0,
strokeWeight: 1,
});
}
var geoJson = '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01384776566772,40.71283222634755],[-74.01206677888183,40.71205151790942],[-74.0127105090454,40.71019729868139],[-74.01331132386474,40.71035995155685],[-74.01365464661865,40.71009970676538],[-74.01442712281494,40.71037621682256],[-74.01384776566772,40.71283222634755]]]},"properties":{}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01672381852416,40.71865472137034],[-74.01286143754271,40.718248139094314],[-74.01485700104979,40.71120574010474],[-74.01661653016356,40.711953928711026],[-74.01631612275389,40.71348280971995],[-74.0174533793762,40.71362919010266],[-74.01672381852416,40.71865472137034]]]},"properties":{}}]}'
/* 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;
}
.map {
width: 100%;
height: 100%;
background: transparent !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</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&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map" class="map"></div>
<div id="map2" class="map" style="top:-100%;"></div>
</body>
</html>
I have just started dabbling in Google Maps API, but I am already stuck. I am looking for a way to recreate this type of map with google maps. I would need to remove all labels, get a blank background (I tried using a map style, but that didn't work for me, code example below) and light up the countries as I hover over them.
Are there any tutorials that I seem to have missed in my search that could help me or can anyone point me in the right direction? :)
var _mapstyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
function create_map()
{
_map = new google.maps.Map(document.getElementById("eyewebz-map"),
{
zoom: 2,
center: new google.maps.LatLng(20, 0),
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
mapTypeIds: ['_mapstyle']
});
_display.setMap(_map);
_display.setPanel(document.getElementById("NavigationText"));
}
EDIT
This is what the map would be used for: I have traveled a bit in my life and expect to do a lot more of it. Since my first big trip, I have been keeping a blog. I have now developed a new blog and I would like to make the countries that I've been to clickable and follow a url once they have been clicked. The ideal situation would be that when I click a country, it takes me to a page where only that specific country is shown in a map with some markers (places to visit). Once you click those markers, it should show a specific post/some information.
Something like this would be ok? Copy and paste inside a HTML page body (JSFiddler here).
<style type="text/css">
#map-canvas {
height: 600px;
width: 800px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// the map
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the map
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// these are the map styles
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},
{
featureType: "landscape",
stylers: [
{ hue: "#ffff66" },
{ saturation: 100 }
]
},{
featureType: "road",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.land_parcel",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: '#ff9900',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#ffff66',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 0.4});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0});
});
google.maps.event.addListener(country, 'click', function() {
alert(this.name);
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
This is a modified version of this
Fusion Tables Layer Example: Mouseover Map Styles.
You should also take a look to Styled Maps.
Another thing you may be interested in is Natural Earth Data. This in the case you need a polygon data source. And here an example of using it GViz API Example: Fusion Tables Data Source.
As the fusion tables are deprecated there is no inbuilt google solution to do this.
Here is small sample code that i made:
https://github.com/arturssmirnovs/Clickable-countries-using-Google-Maps-API
and working sample here: https://arturssmirnovs.github.io/Clickable-countries-using-Google-Maps-API/json/
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
html, body height: 100%;}
body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 16px; margin: 0; padding: 0;}
img { vertical-align: text-bottom; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
<code> remove to run
var json = [
{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
},
{
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
},
{
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
},
{
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}]
</code> remove to run
var map;
var color;
var markers = [];
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function() {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
})(marker, data);
}
</script>
</body>
</html>
I can make this drop markers with a working rollover that displays the title, but with the drop in animation I can not get the 'click' listener for the infoWindow to work. I really need another set of eye on this one. The only examples I can find either show drop animation, or the infoWindow working but not both at the same time.
Your code mistakes at here.
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
I get a javascript error with your code Uncaught TypeError: marker.addListener is not a function on this line (inside the attachContent function):
marker.addListener('click', function() {
The marker you are passing in to that function, is not a google.maps.Marker object, it is the return value of Array.push (the length of the array). Change addMarkerWithTimeout from:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
To:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
proof of concept fiddle
code snippet:
var color;
var markers = [];
function initialize() {
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description, data);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description, data) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function(evt) {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
var json = [{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
}, {
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
}, {
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
}, {
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}];
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0;
}
img {
vertical-align: text-bottom;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I am trying to set the content of an info window but I am having syntax errors accessing the JSON object.
Example from elsewhere on Stack Overflow I am following
JavaScript snippet:
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
What am I doing wrong?
JSON snippet:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maryland Prisoner Map</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--Google Maps API-->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--Stamen Basemaps-->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
<h1 id="header">Maryland Prisoner Map</h1>
<p></p>
<div id="map"></div>
</body>
</html>
CSS:
#header {
text-align: center;
}
#map {
height: 450px;
width: 80%;
margin: 0 auto;
border: 1px solid black;
box-shadow: 2px 2px 1px 2px gray;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
JavaScript:
$(document).ready(function() {
var layer = "toner-lite";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.290385, -76.612189),
zoom: 10,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
//load data into map
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
var stateLayer = new google.maps.Data();
stateLayer.loadGeoJson('JSON/state.geojson');
stateLayer.setMap(map);
var stateInfoWindow = new google.maps.InfoWindow({
content: "I am a state level jail or prison"
});
google.maps.event.addListener(stateLayer, 'click', function(event){
stateInfoWindow.setPosition(event.feature.getGeometry().get());
stateInfoWindow.open(map, stateLayer);
});
var federalLayer = new google.maps.Data();
federalLayer.loadGeoJson('JSON/federal.geojson');
federalLayer.setMap(map);
var federalInfoWindow = new google.maps.InfoWindow({
content: "I am a federal level jail or prison"
});
google.maps.event.addListener(federalLayer, 'click', function(event){
federalInfoWindow.setPosition(event.feature.getGeometry().get());
federalInfoWindow.open(map, federalLayer);
});
var marylandLayer = new google.maps.Data();
marylandLayer.loadGeoJson('JSON/maryland.geojson');
//give the map style
marylandLayer.setStyle(function(feature) {
return {
fillColor: getColor(feature.getProperty('Difference')), // call function to get color for state based on the COLI (Cost of Living Index)
fillOpacity: 0.9,
strokeColor: '#FFFFFF',
strokeWeight: 1,
zIndex: 1
};
});
//set layer to map
marylandLayer.setMap(map)
//get some color
function getColor(Difference) {
return Difference >= 94 ? '#b10026' :
Difference > 76 ? '#e31a1c' :
Difference > 58 ? '#fc4e2a' :
Difference > 38 ? '#fd8d3c' :
Difference > 20 ? '#feb24c' :
Difference > 7 ? '#fed976' :
Difference > 1 ? '#ffffb2' :
Difference > -1 ? '#FFFFFF' :
'#000000';
};
// Add mouseover and mouse out styling for the GeoJSON Maryland data
marylandLayer.addListener('mouseover', function(e) {
marylandLayer.overrideStyle(e.feature, {
strokeColor: '#2a2a2a',
strokeWeight: 2,
zIndex: 2
});
});
marylandLayer.addListener('mouseout', function(e) {
marylandLayer.revertStyle();
});
var polygonInfoWindow = new google.maps.InfoWindow({
content: marylandLayer.features.properties.Difference
});
google.maps.event.addListener(marylandLayer, 'click', function(event){
polygonInfoWindow.setPosition(event.feature.getGeometry().get());
polygonInfoWindow.open(map, marylandLayer);
});
});
You need to load the content into the infowindow inside the layer 'click' listener. Inside that function evt is a reference to the feature and you can call the getProperty method to access that feature's properties:
localLayer.addListener('click', function (evt) {
var address = evt.feature.getProperty("Address");
localInfoWindow.setContent("<h3>" + address + "</h3>");
localInfoWindow.setPosition(evt.feature.getGeometry().get());
localInfoWindow.open(map);
});
proof of concept fiddle
I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>