Develop Reference

How to use GoogleMaps InfoWindow() on a google.maps.Circle?

The InfoWindow is not displayed if I use it in a loop.
Here is an example of how to use it with Marker:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple
I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.
What am I missing?
function initMap() {
// Map settings, location : Barcelona, Spain
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.37, lng: 2.17},
zoom: 15,
mapTypeId: 'roadmap',
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true
});
// Circle distribution data : location, radius, data
let distribution = {
target_garden: {
center: {lat: 41.371400, lng: 2.171942},
population: 1,
data: `<div>Text 01</div>`
},
target_wtc: {
center: {lat: 41.373477, lng: 2.177650},
population: 2,
data: `<div>Text 02</div>`
}
};
// Display 2 red circles on map
let target;
for (target in distribution) {
let circle = new google.maps.Circle({
// colors
strokeColor: '#000',
strokeOpacity: .2,
strokeWeight: 3,
fillColor: '#f00',
fillOpacity: 0.5,
// position
map: map,
center: distribution[target].center,
radius: Math.sqrt(distribution[target].population) * 100,
// settings
draggable: false,
editable: false,
clickable: true
});
let infowindow = new google.maps.InfoWindow({
content: distribution[target].data
});
// Event : on click a circle open infowindow
circle.addListener('click', function () {
infowindow.open(map, circle);
console.log('on');
});
}
}
I expect a click on the red circle to open an InfoWindow.

The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:
open([map, anchor])
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the
core API, the only anchor is the Marker class. However, an anchor can
be any MVCObject that exposes a LatLng position property and
optionally a Point anchorPoint property for calculating the
pixelOffset (see InfoWindowOptions).
So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):
circle.addListener('click', function () {
infowindow.setPosition(circle.center)
infowindow.open(map);
});

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 Maps API stopped working in Wordpress Template

So my Google Maps API WAS working and now it's not. Looking through the documentation on Google's Maps API I don't see that anything has changed. We're using the maps embedded in a Wordpress PHP Template and everything I've checked seems to be right. Has something changed?
Here's the initial code:
<section id="main">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqnue6HpFD-HQvnk_cOKTQmqAzE6Xb9NQ"></script>
<script type="text/javascript" src="http://www.americanraceronline.com/wp-content/uploads/dev/markerwithlabel.js"></script>
<script type="application/javascript" >
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(40.6,-95.665);
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.Whitewater,
styles:[/lots of styles here/]};
var poly;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new MarkerWithLabel({
position: new google.maps.LatLng(40.27488643704891, -110.740234375),
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "WEST",
labelAnchor: new google.maps.Point(22, 2),
labelClass: "mylabels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: {}
});
The link to the page is: http://www.americanraceronline.com/distributors/
What am I missing?

In your browser console:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.main.js:60 yl
This does not need much explanation: you must be including the Google API repeated, check your includes to contain API reference only once.
Maybe file main.js, line:60 ??

For Google Maps mapOptions, zoom is required (see reference), e.g.
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
zoom: 9,
styles:[/lots of styles here/]
};
For example, I created a simple Fiddle of your code that did not work until zoom was provided.

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.