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.
Related
On one of my webpages there a Google V3 API map upon which I add four KML layers.
Sometimes all four KML Layers will be displayed, but more often or not, only two or three layers are loaded. It is the last KML layer that loads less frequently. Refreshing the page will load more.
Here's my javascript
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml",map: map, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml",map: map,preserveViewport: true});
}
Presumably the KML files are to taking too long to download and are not available in time to be added to the map.
What can I do to resolve this?
So for clarity, here's the final solution
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml", map: map, zIndex: 0, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml", map: map, zIndex: 1, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml", map: map, zIndex: 2, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml", map: map, zIndex: 3, preserveViewport: true});
}
I'm trying to obtain the following behaviour in Google Maps V3:
Map Dragging disabled, so the map center won't be missing while the user uses the mouse
Map Zooming enabled, so the map details can be adjusted upon customer needs using the wheelmouse
To obtain this I use the following settings:
map = new google.maps.Map(document.getElementById('map_canvas'), {
center : new google.maps.LatLng(41, 14),
zoom : 13,
mapTypeId : google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
draggable: false,
scrollwheel: true,
streetViewControl: true,
fullscreenControl: true,
scaleControl: true,
rotateControl: true,
overviewMapControl: true,
overviewMapControlOptions: {opened: true},
gestureHandling: 'greedy'
});
But doesn't work, while if I set draggable: true, then the scrollwheel feature will be enabled as well. In other words it looks like to have scrollwheel: true we must also set draggable:true otherwise the setting will be ignored. Any clue?
This is my current code
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
But as you can see, the controls stay.
I've tried ZoomControl: false, as well but that doesnt work either.
Any idea why?
Thanks
scaleControl:false is the default value, it controls the scaleControl. (scaleControl enables/disables the Scale control that provides a simple map scale. By default, this control is not visible. When enabled, it will always appear in the bottom right corner of the map.) If you want the defaultUI disabled, set disableDefaultUI: true.
If you are just worried about the zoomControl, you don't have any code to disable that (that would be zoomControl: false (not ZoomControl: false, javascript is case sensitive).
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
zoomControl: false,
streetViewControl: false,
scaleControl: false, // this is the default value...
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
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
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.