Develop Reference

Background color is showing blue for some time when google map satellite view loading

I have implemented google map and put default view as Satellite. But when page is loading background is showing blue before showing map. Its working fine when put map view default. I have checked with backgroundColor: 'none' in map option. But its not working.
I am using code like:
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(center_lat,center_long),
zoom: 18,
mapTypeControl: true,
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
backgroundColor: 'none'
});
Can someone help me?

I was defining map variable before getting location details. I found a solution for this issue. define map variable after calling url for get location details. For example:
$.getJSON('googlescript.php', function(items)
{
var center_lat = '30.704649';
var center_long = '76.717873';
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(center_lat,center_long),
zoom: 18,
mapTypeControl: true,
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
backgroundColor: 'gray'
});
var routePoints = [];
for (var i = 0; i < items.length; i++) {
(function(item) {
addMarker(item.lat,item.long);
})(items[i]);
routePoints.push(new google.maps.LatLng(items[i].lat,items[i].long));
var route= new google.maps.Polyline({
path: routePoints,
strokeColor: "#FF0000",
strokeOpacity: .9,
strokeWeight: 3,
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
offset: '0',
repeat: '100px'
}
]
});
map.setCenter(new google.maps.LatLng(center_lat,center_long));
map.setZoom(18);
route.setMap(map);
map.setTilt(0);
}
});
center = bounds.getCenter();
map.fitBounds(bounds);

Google map (mapTypeControlOptions) is not working

I would like to position my satellite button to the center of the map but however is not working. Would appreciate if anyone can assist here. thanks.
function initialize() {
$(q).addClass('fmp_responsive_map');
startMap(true);
var mapProp = {
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
$('input[type="submit"], button[type="submit"]', $(y.searchForm))
.on('click', function(a) {
a.preventDefault();
var b = $(y.searchForm).attr("action");
searchData(b)
})
}

Tried the working sample found here, and made changes to the following code.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -28.643387, lng: 153.612224},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.CENTER
},
...
That's it. Try using CENTER.

Using a image to overlay a section of google map api 3 in javascript

Hello I am using google maps api 3 ,this is the way how I am initializing the map:
myLatlng = new google.maps.LatLng(19.1113635001101, 72.86958755554201);
var myOptions =
{
zoom: 17,
center: myLatlng,
panControl: false,
zoomControl: true,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
I also have image-map(vector/raster) of entire location which I want to overlay onto the above map(so that overlayed section would be hide google maps(default) underneath ),is there a way to do that?

Google maps JS API supports this with: https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay?

Multiple Google Maps

I currently have 3 separate google maps being loaded on my web page using the javascript api and they take a good few seconds to load in which this renders the page inactive until they have finished.
Does anyone have any recommendations on what I can do to change this? It is very slow at the moment and I don't know how to get around this.
Thanks!
function googlemap() {
// map pin
var companyImage = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_pin.png',
new google.maps.Size(100,60),
new google.maps.Point(0,0),
new google.maps.Point(21,65)
);
// map pin shadow
var companyShadow = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_shadow.png',
new google.maps.Size(120,60),
new google.maps.Point(0,0),
new google.maps.Point(23,23)
);
// map one
var onePos = new google.maps.LatLng(44.374411, -1.088402);
var oneSettings = {
zoom: 15,
center: onePos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var oneMap = new google.maps.Map(document.getElementById("one_map"), oneSettings);
var oneMarker = new google.maps.Marker({
position: onePos,
map: oneMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(oneMarker, 'click', function() {
infowindow.open(map,oneMap);
});
// two
var twoPos = new google.maps.LatLng(42.349055,4.110803);
var twoSettings = {
zoom: 15,
center: twoPos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var twoMap = new google.maps.Map(document.getElementById("two_map"), twoSettings);
var twoMarker = new google.maps.Marker({
position: twoPos,
map: twoMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(twoMarker, 'click', function() {
infowindow.open(map,twoMap);
});
// three
var threePos = new google.maps.LatLng(32.377624,-0.523466);
var threeSettings = {
zoom: 15,
center: threePos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var threeMap = new google.maps.Map(document.getElementById("three_map"), threeSettings);
var threeMarker = new google.maps.Marker({
position: threePos,
map: threeMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(threeMarker, 'click', function() {
infowindow.open(map,threeMap);
});
and my html
<div id="one_map"></div>
<div id="two_map"></div>
<div id="three_map"></div>

I'd recommend breaking up your function in to one function for each map you're creating (or one dynamic one that can do the work based on parameters), then at the end of each one, execute the next using a setTimeout call with either a delay of 0, or just a small delay. When you then drop out of the function you give the UI time to update without waiting for the whole task to be completed. While not actually making your page faster, it makes it feel faster and more responsive. There may be other improvements as well, but this simple change can often make a huge difference.

Perhaps it has to do with your OS or bandwidth.
Have a look at these:
9 maps: http://maps.forum.nu/gm_maps_in_sync.html
and
16 maps: http://maps.forum.nu/gm_maps_in_sync2.html
They are API V2, and pretty much useless, but they are created in a loop and they load fast.
Note that getElementById() can be costly depending on the complexity of your DOM. The examples I posted use createElement() and appendChild() instead.

How to hidden the "MapTypeControlStyle" control on Google-Maps v3?

This is my code:
var myOptions = {
zoom: 13,
center: latlng,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,position:google.maps.ControlPosition.TOP_LEFT},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
I see the doc, but I can't find the 'hidden' Property
What can I do?

Add
disableDefaultUI: true
to your mapOptions.