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

Google Map API Street View controls?

I couldn't figure out how to change/hide Street View controls in scenario where there's a map by default and you drag "little guy" to road.
This is the piece of code about my options:
function initMap() {
var mapOptions = {
center: new google.maps.LatLng( <?php echo $latitude . ',' . $longitude; ?>),
zoom: 12,
disableDefaultUI: true,
backgroundColor: 'white',
streetViewControl: true
};
// I have markers & other stuff in here, it's properly closed function!
I found reference for Street View controls only when it's Street View by default, here's a code example from Google Developers:
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
});
}
How to add Street View UI options if default view is map and you can drag Street View "guy" to map?

Have a look at this answer to see if it helps. I think you need to listen for the streetview becoming visible and then hide the controls using streetViewControl = false etc.
Detecting Google Maps streetview mode

How to show multiple areas by location in google maps using php and sql [duplicate]

Trying to move marker/map on interval with lat/long coords from sql db.
function initialize() {
var myLatLng = new google.maps.LatLng(41,14);
var myOptions = {
zoom: 16,
center: myLatLng,
scrollwheel: false,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE,
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function getCoords() {
$.ajax({
url: "../ajaxscript.php",
type: "POST",
data: {
foo : "bar"
},
dataType: "text",
success: function(returnedData) {
alert(returnedData);
moveMarkerMap(returnedData);
}
});
}
function moveMarkerMap(newCoords) {
var newLatLang = new google.maps.LatLng(newCoords);
map.panTo(newLatLang);
marker.setPosition(newLatLang);
}
window.setInterval(getCoords, 5000);
Setting the new google.maps.LatLng(14,41) in moveMarkerMap() will move it, and the returnedData shows in alert() but marker won't move when used with moveMarkerMap()
The returned string from ajax is correct format; (9.624672,7.242244) as shown in alert()
so not sure why its not working.

The google.maps.LatLng constructor takes two numbers for arguments. This won't work:
var newLatLang = new google.maps.LatLng(newCoords);
You need to convert newCoords into two numbers.
Convert String to latlng google maps
Convert “[52.43242, 4.43242]” to google LatLng
How do I get a pin on Google Maps using location from a variable?

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.