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>
Related
I am using Ionic 4 and I have implemented the Google Maps API. The map works fine, however when i go to style it, some of the updates do not change. In my example if I change some of the camera options, those do change perfectly fine. However, when I want to add styles or gestures, those changes are not reflected.
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 15,
tilt: 30
},
styles: [
{
"featureType":"poi",
"stylers":[
{
"visibility": "off"
}
]
}
],
gestures:{
rotate:true
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
This needs to be run on an actual device. I think that the browser does not support styled maps or something.
did anyone ever try to style the Fonts/Lines/etc of the GoogleMaps-Sattelite View? I know about SnazzyMaps and other Google Maps customizer, but they dont have a sattelite style option?
Thanks for helping out,
Julia
UPDATE:
I figured out to get rid of all the labels on the hyprid/sattelite view.
Using:
var mapStyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
and use it when creating the map:
function createMap(standort) {
map = new google.maps.Map(
mapElem,
{
zoom: 12,
minZoom: 3,
mapTypeId: 'hybrid',
mapTypeControl: false,
styles: mapStyle,
disableDefaultUI: true,
}
}
);
I just have one more question, does anyone know how I get rid of the street/Border-Overlay--> Example here
I am using the sample from google map API to draw the circle and wanted to place the population value inside the circle for the plots can we do this in google map API
Example:https://developers.google.com/maps/documentation/javascript/examples/circle-simple
inside the ping circle as shown in the demo ,want to place the value of the population
One option is to use the InfoBox third party library to label the circles.
Proof of concept fiddle
code snippet:
// This example creates circles on the map, representing populations in North
// America.
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
zIndex: -100,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
var myOptions = {
content: "population<br>" + citymap[city].population,
boxStyle: {
background: '#FFFFFF',
color: '#000000',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(citymap[city].center.lat,
citymap[city].center.lng),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {
lat: 41.878,
lng: -87.629
},
population: 2714856
},
newyork: {
center: {
lat: 40.714,
lng: -74.005
},
population: 8405837
},
losangeles: {
center: {
lat: 34.052,
lng: -118.243
},
population: 3857799
},
vancouver: {
center: {
lat: 49.25,
lng: -123.1
},
population: 603502
}
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>
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>
I understand how to initialise a map with custom styles like the following:
var styles = [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" }
]
}
];
var mapOptions = {
zoom: 13,
maxZoom: 15,
minZoom: 12,
center: new google.maps.LatLng(50.924229,-1.396841),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
styles: styles
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
But is it possible to change to another style once the map has already been initialised? For example changing the colours of the map when certain events are triggered?
Yes. just use
map.setOptions(mapOptions);
Yes, create a new style object and then change the style by setting the option:
map.setOptions({styles: styles});