We Keep Coding

KmlLayer not always displayed

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});
}

GoogleMaps: disable dragging but enable wheel mouse zooming

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?

scaleControl: false, is not working. How do I resolve this? Google Maps API 3

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"]

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.

Change order of Google Map controls in the same location (i.e. RIGHT_TOP)

I need to rearrange the default controls in the Google Map (v3, 3.4) API.
Everything is in place and works, but when I add the mapTypeControl, zoomControl, the streetViewControl and the panControl to the same ControlPosition (i.e. google.maps.ControlPosition.RIGHT_TOP), I can't define the order of how they are rendered.
mapTypeControl has a default of TOP_RIGHT, but changing it to RIGHT_TOP (the default of the other ones mentioned above) add's it to the bottom in this location:
Here's the code for the map options (nevermind the added OSM layer):
var mapOptions = {
zoom: 12,
center: def_center, // is set before this snippet
mapTypeControl: true,
mapTypeId: user_maptype, // is set before this snippet
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, "openstreetmap"]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
I need the mapTypeControl to be the first element to be rendered (above the streetViewControl). Any idea how to do this?

This code works fine in the google code editor # http://code.google.com/apis/ajax/playground/#control_position_v3
in the end the solution was to use TOP_RIGHT instead of RIGHT_TOP
Additionally the index property can be changed via setAttribute just like a majority of the other properties.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
});
}

I don't realy have a solution unfortunately but acording to this page
Google Map API V3 Controls user defined controls can be placed before the default ones by changing their index in DOM. Might this be the same problem, that the zoom-control has a lower index than the map/satelite control?
Not sure how you would go about changing the index but it might be an avenue to find a solution.
Oh and if you do find out how to solve it please paste your solution here. Might come in handy.