I'm wondering if there is anyway to hide or disable user-contributed bike lines/trails to Google Map Maker?
My website has a riding area where there is a bunch of bad/inaccurate map maker data shown when you toggle the map from Google Earth to Google Maps.
http://www.trailforks.com/riding_areas/cumberland
The data is visible here on Map maker.
http://goo.gl/Ebnq4
My site uses GPS data to map trails, where as this map maker data someone hand drew and we would like to hide it from the google maps we overlay our trail data on when in road view.
You can customize the style of the basemap, but not with perfect granularity. In this case bike trails (and other trails/paths) are classified under Local Roads ... so if you don't mind losing those you can turn them off with a custom style. For example if you pass mapOptions in while instantiating your map, you might do something like:
var mapOptions = {
styles : [
{
featureType: "road.local",
stylers: [
{ visibility: "off" }
]
}
]
}
Related
We are integrating Google Maps with an iframe.
Unfortunately the map is displaying POIs by the competitors. Is there any possibility to disable them with a suffix in the HTML?
http://www.sorba.ch/kontakt
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10798.188248369914!2d9.3721622!3d47.4207752!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1721878daf7af98e!2sSorba+EDV+AG!5e0!3m2!1sde!2sch!4v1507043605585" width="100%" height="450" frameborder="0" style="border:0"></iframe>
Or is it just possible with JavaScript?
No, you cannot do this with HTML; HTML sets the initial structure of your application, it does not change its behaviour. If you need to change the behaviour or style the response returned from the Google servers, you can indeed use the Javascript API. You can indeed style your map to filter out businesses by setting their respective visibility to “off”. This is a quick sample you could model to achieve this:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
// center the map to your business address
// Set a marker with an InfoWindow if you like to model map in the example
center: {lat: xx.xxxxx, lng: yy.yyyy},
zoom: zz,
styles: [
{
featureType: “poi.business”,
elementType: “labels”,
stylers: [{visibility: “off”}]
}
]
}
Thank you all for comments and help.
I switched to a JavaScript designed map. Difficult but the right direction.
Who also needs some help or introduction should visit:
https://mapkit.io/ (I am generating the base code with this great tool)
and
https://developers.google.com/maps/documentation/javascript/examples/?hl=de
How to avoid the displaying of my personal "favs" (the stars that represent my favourite location) in an embedded gmap?
How to avoid to display stars without log-out to my gmap account?
Thanks, Fabio
Map styles allow you to customize the presentation of the standard Google base map, by changing the visual display of elements such as roads, parks, and built-up areas.
Example
Hide points of interest feature:
var mapOptions = {
zoom: 5,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.set('styles', [
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
]);
You should also try out the Styled Maps Wizard, which allows you to easily experiment with styles, and which creates a style array that you can copy and paste into your code.
References
Customizing Google Maps: Styling the Base Map
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
I have set up "clean" map (with Google Maps API v3) with no labels in my website, now a user can select some cities from a dropdown menu and the markers of the selected cities should appear on the map also showing the name of the city as if it was part of the marker.
I can't use an InfoWindow because I need it for other informations, so is there a way to reach my goal?
Thank you in advance.
Here is a screenshot of what should appear when some cities are selected.
You can use Markers with Labels Library..Here is the code
labelAnchorPos = new google.maps.Point(25, 10); // you can adjust it as you require
marker = new MarkerWithLabel({
position : new google.maps.LatLng(lat,.lon),
icon : './img/img/yourIMG.png',
labelContent : labelContentValue,
labelAnchor : labelAnchorPos,
labelClass : "labels", // the CSS class for the label
labelInBackground : false
});
You can then show/hide labels of selected markers as required
I have a v3 google map and in the bottom-right corner of the map, there is a "Report a map error" link overlaid onto the map. Does anyone know if it is possible to remove this from the map?
Edit:
Here is an example of what I mean: http://jsfiddle.net/ahfA5/
You could style the map to get rid of this. Check this out.
Notice that if you compare the first two screenshots, the "Report a map error" link is present in the first, but not in the second.
The simplest way to apply a dummy style to the map so that it still looks like google maps but without the error link would be to do the following:
const styleOptions = {
name: `Dummy Style`,
}
const MAP_STYLE = [
{
featureType: `road`,
elementType: `all`,
stylers: [{ visibility: `on` }],
},
]
const mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions)
map.mapTypes.set(`Dummy Style`, mapType)
map.setMapTypeId(`Dummy Style`)
Here's the updated JSFiddle.
An issue with the custom style map is that when switching back from map/satellite or street view it does not return to the custom style instance.
// remove the wrapping container
.gm-style-cc:last-child {
display: none !important;
}
// remove the link only
a[title="Report errors in the road map or imagery to Google"] {
display: none !important;
}
There isn't a way to disable this feature properly via the API.
Keep in mind, if you hide it without using the API it will violate the Google Maps API Terms of Service which, as of the date of this post, doesn't allow developers to manipulate this link. Refer to 10.1.1.f.x:
delete, obscure, or in any manner alter any brand features, logos, warnings, notices... or links that appear in the Service or the Content;
The example presented here does works:
var styleOptions = {
name: "Dummy Style"
};
var MAP_STYLE = [
{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "on" }
]
}
];
var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
map.mapTypes.set("Dummy Style", mapType);
map.setMapTypeId("Dummy Style");
Initially the map get displayed WITHOUT the link on the Default map!
BUT
upon selecting either:
the MAP/Terrain or the SATELLITE/Label from the menu the Report map error link RETURNS on the map refresh.
If you choose as an alternative to create a StyledMapType MAP.
The Report a map error link can be disabled permanently on the StyledMap.
But you now have two MAPS (Default and the StyledMap).
I couldn't find a way to hide the default map.
Bottom line I couldn't remove the link Report a map error from the Default map permanently.
You can not do this - Google's attempt at providing accurate data via crowd-sourcing will cause this on occasion. Live with it and accept that limitation. you can layer a custom element on top of the canvas if you position it absolute or fixed. But that kind of violates their TOS as it also covers the copyright notice.
You can hide it using CSS trick. It's dirty but working:
/* remove ugly google report-a-bug button from maps */
.gmnoprint:last-child {
display: none !important;
}