Google maps api v3 hide gray building overlays - javascript

I am making a map that can display several trains live driving around inside the station. However there is a grayed out building on top of the station that makes the tracks almost impossible to see. However when I look at google maps itself those buildings don't even appear. Is there a setting in the map options that I can implement to get rid of those buildings?
These are my existing map options:
var mapOptions = {
zoom: 17,
center: markerBounds.getCenter(),
disableDoubleClickZoom: true,
mapTypeControl: false,
disableDefaultUI: true,
scrollwheel: false,
draggable: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
My map:
Google maps:
Thanks in advance.


I found out how to fix the issue. Simply change
mapTypeId: google.maps.MapTypeId.ROADMAP
to
mapTypeId: google.maps.MapTypeId.TERRAIN

Related

Google Maps Markers Wont Show Up

<script type="text/javascript">
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000,-40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
</script>
I am trying to put some markers on the map of certain cities. I can not seem to make the makers apear. I have looked through several forums, and tried everything.
I hope this is enough information. I am still very new to stack overflow, so If I did this wrong, please let me know how to post a question more clearly.
Thank you,

You are missing the new keyword for position parameter while creating marker, please check the below code, it should work.
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000, -40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: new google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}

Rotating Google Maps in Ionic project

I am using Google Maps API JS in my Ionic project, and everything is fine except that I can't rotate the map, only pan and zoom. So I looked and found this code to be added:
var mapOptions = {
center: latLng,
zoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
};
But no change happened. Please help me solve this problem.
Thanks

Even though its 4 year old question, You can do so by using the latest Google Maps plugin from ionic and then use following code
let mapOptions: GoogleMapOptions = {
gestures:{
rotate:false,
tilt:false,
scroll:false
}
};
this.map = this.googleMaps.create(this.mapDiv.nativeElement, mapOptions);
Notice the rotate:false gesture in mapOptions. This will help you enable/disable 2 finger rotation of Map.

How to remove the "white position circle" in google map?

How to remove this control in google map ? :

EDIT
These controls can be set to false
Zoom control
Rotate control
Scale control
Street View control
Map Type control
initMap
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
zoomControl: false,
scaleControl: true
});
}

Google maps remove default man icon

i am using google maps with my project as you can see here ( Demo )
in left top you can see man icon and zoom
i want to remove man icon and set zoom left-top
what should i do? i am using this library js library and you can see other library in (view) source demo link [3]

This should remove the street view (the man) and the pan control:
var mapOptions = {
center: mapCenter,
zoom: 10,
panControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Example of using Google Maps options:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

I hope you work
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
disableDefaultUI: true, //disables controls
zoomControl: true, //zoom control enables
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE, //enables the dimension
position: google.maps.ControlPosition.TOP_RIGHT //position enables
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}

to disable the man icon, you can set the streetViewControl into false in your map options.
streetViewControl: false

The above answers do not meet your question. Try this caused its work for me to disable the people icon.
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
if you want to remove all then use this :
mapTypeControl: false,
disableDefaultUI: true,
if you want to style the map color, try this :
var mapStyles = [ {"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"on"},{"lightness":10}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":50}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#3b5998"},{"saturation":30},{"lightness":49}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#3b5998"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#3b5998"}]}, {featureType:'road.highway',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-92},{lightness:60},{visibility:'on'}]}, {featureType:'landscape.natural',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-71},{lightness:-18},{visibility:'on'}]}, {featureType:'poi',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-70},{lightness:20},{visibility:'on'}]} ];
change color attribute # as you like, then put this style in your map :
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 9, // optional based on your requirement
styles: mapStyles
If you want to style the icons, then put this :
marker = new google.maps.Marker({
icon: "/images/icon/marker123.png", // based on your dir file
position: point, // based on your srcipt selection
map: map
Hope this useful for others. :)

Can gmaps4rails return an image-like map?

I currently am using gmaps4ails and have an interactive map returned. Is there a way to get a more static like image instead?
I've tried modifying the following code but for some reason on the phone pinch and zoom doesn't work
if MODETECT.device.phone
#map_options =
disableDefaultUI: true #false has the street view capability
disableDoubleClickZoom: false
type: "ROADMAP" # HYBRID, ROADMAP, SATELLITE, TERRAIN
draggable: false # don't allow to drag map
scrollwheel: true
zoomControl: true
else
#map_options =
disableDefaultUI: true #false has the street view capability
disableDoubleClickZoom: false
type: "ROADMAP" # HYBRID, ROADMAP, SATELLITE, TERRAIN
draggable: true # don't allow to drag map
scrollwheel: false #can't use the scroll whell to zoom
zoomControl: true #widget that allows control zoom without pinch
...
createMap : ->
defaultOptions =
maxZoom: #map_options.maxZoom
minZoom: #map_options.minZoom
zoom: #map_options.zoom
center: #createLatLng(#map_options.center_latitude, #map_options.center_longitude)
mapTypeId: google.maps.MapTypeId[#map_options.type]
mapTypeControl: #map_options.mapTypeControl
disableDefaultUI: #map_options.disableDefaultUI
disableDoubleClickZoom: #map_options.disableDoubleClickZoom
draggable: #map_options.draggable
scrollwheel: #map_options.scrollwheel
zoomControl: #map_options.zoomControl
It seems to work in the sense for draggable, but scrollwheel and zoomControl on the phone isn't working.

Categories