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

Control Options Javascript Google Maps

How can I position zoomControl options and panControl positioning next to each other but in the middle? I used LEFT_CENTER command but it does not insert them next to each other.
Thanks in regards..
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(39.300299, 34.471664),
zoom: 6,
disableDefaultUI: true,
mapTypeControl: true,
//mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_TOP },
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: true,
panControlOptions: { position: google.maps.ControlPosition. LEFT_CENTER},
zoomControl: true,
zoomControlOptions: { style: google.maps.ZoomControlStyle.BIG, position: google.maps.ControlPosition.LEFT_TOP },
scaleControl: true,
});

For the default controls, you have to use the Control Positioning , so you can not place them next to each other in the LEFT_CENTER.
But if you use Custom Control so you can change position of custom control, you can see this example. In that example, you can change the position of the custom control by change its margin value. ex: controlUI.style.marginBottom = 100px; (You can see the change in this link: http://jsfiddle.net/cmw3zy9p/)
But for default controls, you have to follow the supported control positions.

google.Maps.Circle repeats in every clone part of google map on small zoom option

Does anyone know the way to prevent the repeating property of circle in every clone part of google map.
In google.Maps API I found the similar option of marker it's: optimized property set to false.
The parts of my code:
this.map = new google.maps.Map(this.el, {
zoom: 4,
center: new google.maps.LatLng(33.2169, -97.1336),
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
});
this.circle = new google.maps.Circle({
center: new google.maps.LatLng(33.2169, -97.1336),
radius: 1609344,
strokeWeight: 1,
strokeColor: "#e64646",
draggable: true,
editable: true,
visible: false,
map: this.map
});

How can I prevent google maps from refreshing while setting the marker to a new position?

I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Get rid of
map.setCenter(latlng);

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.