Develop Reference

google map api how to zoom in and then out by clicking one of several markers

On a map I have various markers. Upon clicking a marker the user gets zoomed in and centered where that marker is to see details and the mapTypeId also changes from terrain to satellite.
I'd like to user to be able to click the marker again to zoom out, center the map and change the mapTypeId back to terrain.
The map initialization is here:
var map = new google.maps.Map(document.getElementById('map-canvas'), {
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
zoom: 11,
center: new google.maps.LatLng(-37.6756817,145.6690691),
mapTypeId: 'terrain'
});
var mapzoom = map.getZoom();
We set an array of towns like this:
var locations = [
// Healesville
['Town: Healesville', -37.6534206,145.5117927, 'uploaded-images/marker-red-32h.png',0],
// Warburton
['Town: Warburton', -37.7514003,145.6919378, 'uploaded-images/marker-red-32h.png',1],
[...],
[...],
[...]
];
The code for the first action to zoom-in is here:
var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.panTo(this.getPosition());
map.setZoom(16);
map.setMapTypeId('satellite');
}
})(marker, i));
I commenced the second part to zoom back out with:
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
if(zoomLevel > 11) {
return function() {
var center = new google.maps.LatLng(-37.6756817,145.6690691);
map.setCenter(center);
map.setZoom(11);
map.setMapTypeId('terrain');
}
} else {
return function() {
map.panTo(this.getPosition());
map.setZoom(16);
map.setMapTypeId('satellite');
}
}
})(marker, i));
}
Unfortunately the zoom-out script only worked on the last marker in the array of markers. Need to work out how to zoom out to the original setting for each marker on the map.

You only have a reference to the last marker in your zoom handling code (it is set to last value the last time through the loop). Simpler to just add the code to the marker click function. I think what you want is this:
var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
zoomLevel = map.getZoom();
if (zoomLevel <= 11) {
map.panTo(this.getPosition());
map.setZoom(16);
map.setMapTypeId('satellite');
} else {
var center = new google.maps.LatLng(-37.6756817, 145.6690691);
map.setCenter(center);
map.setZoom(11);
map.setMapTypeId('terrain');
}
}})(marker, i));
}
You may want to dynamically compute the center/zoom by computing the bounds of the displayed markers and calling map fit bounds with that bounds (rather than the code that is currently in the else.
proof of concept fiddle
code snippet:
var zoomLevel;
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
zoom: 11,
center: new google.maps.LatLng(-37.6756817, 145.6690691),
mapTypeId: 'terrain'
});
var mapzoom = map.getZoom();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: {
lat: locations[i][1],
lng: locations[i][2]
},
map: map
})
var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
zoomLevel = map.getZoom();
if (zoomLevel <= 11) {
map.panTo(this.getPosition());
map.setZoom(16);
map.setMapTypeId('satellite');
clickedMarker = marker;
} else {
var center = new google.maps.LatLng(-37.6756817, 145.6690691);
map.setCenter(center);
map.setZoom(11);
map.setMapTypeId('terrain');
}
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
// Healesville
['Town: Healesville', -37.6534206, 145.5117927, 'uploaded-images/marker-red-32h.png', 0],
// Warburton
['Town: Warburton', -37.7514003, 145.6919378, 'uploaded-images/marker-red-32h.png', 1],
];
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

animated gif in array in google map

I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.

One option is to create the marker with {optimized: false}:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click

How to define custom size on Google Map when using closures in event listeners

I' am using Google Map to plot the marker and a small popup box that will appear when someone clicks on the market. Image is attached. By Default, Google has set fixed width of the Popup and I wanted to change its size. I was not able to anything on Documentation.
Below are my codes
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-14.306407, -170.695018),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var voyagePlanCoordinates = [
new google.maps.LatLng(),
];
var voyagePath<?php echo $voyage_id; ?> = new google.maps.Polyline({
path: voyagePlanCoordinates,
geodesic: true,
strokeColor: "",
strokeOpacity: 1.0,
strokeWeight: 5
});
voyagePath.setMap(map);
setMarkers(map, voyages);
}
var voyages = [];
function setMarkers(map, locations) {
var image = {
url: '/wp-content/themes/theme/resources/images/marker.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
for (var i = 0; i < locations.length; i++) {
var voyage = locations[i];
var myLatLng = new google.maps.LatLng(voyage[1], voyage[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: voyage[0],
zIndex: voyage[3]
});
voyage_msg(marker, i);
}
}
function voyage_msg(marker, num){
var message = [];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Please Help!

You don't need any extra code or api call to set the width of the popover. All you need is basic CSS
.map-closures{
width: 200px;
}
That should do the trick.

Cannot get a different Icon in Google map on change event

I am new to Google API V3. I want to change the Icon on Zoom event. The full code is running as expected, it is the last bit wherein I have given a map change event to capture the change in zoom so that I could change in the icon from a simple circle to Google standard red icon. Please do review and suggest corrections, thank you so much.
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(20, 0);
var myOptions = {
zoom: 3,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.65,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25,
map: map,
center: latlng,
radius: parseInt(markers[i].getAttribute("population"))/25
};
var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region"));
var onekmcircle = new google.maps.Circle(circleOptions);
}
});
}
function createMarker(name, latlng, popl, cntry, rgon) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2
},
title: name});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentstring});
infowindow.open(map, marker);
var zoomLevel = map.getZoom();
map.setCenter(marker.getPosition());
if (zoomLevel<6)
{
map.setZoom(6);
}
});
return marker;
}
google.maps.event.addListener(map, 'zoom_changed', function() {
var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
if (currentZoom >9){
for(i=0; i< markers.length; i++ ) {
markers[i].setIcon(icon);
}
}
});

Here you go...I fixed your code for you...you had a few errors. Biggest one being that you were not saving the markers you created into an array to loop through on the event listener.
I added the gMarkers array. I ran the code in the console of your site and it worked. Let me know if you have any questions.
var infowindow;
var map;
var gMarkers=[];
function initialize() {
var myLatlng = new google.maps.LatLng(20, 0);
var myOptions = {
zoom: 3,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
markers = data.documentElement.getElementsByTagName("marker");
});
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.65,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25,
map: map,
center: latlng,
radius: parseInt(markers[i].getAttribute("population"))/25
};
gMarkers.push(createMarker(markers[i].getAttribute("name"), latlng,markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region")));
var onekmcircle = new google.maps.Circle(circleOptions);
}
google.maps.event.addListener(map, 'zoom_changed', function() {
var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
if (currentZoom >9){
for(var i=0; i< gMarkers.length; i++ ) {
gMarkers[i].setIcon(icon);
}
}else{
for(var i=0; i< gMarkers.length; i++ ) {
gMarkers[i].setIcon({path: google.maps.SymbolPath.CIRCLE,scale: 2});
}
}
});
}
function createMarker(name, latlng, popl, cntry, rgon) {
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2
},
title: name
});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentstring});
infowindow.open(map, marker);
var zoomLevel = map.getZoom();
map.setCenter(marker.getPosition());
if (zoomLevel<6){
map.setZoom(6);
}
});
return marker;
}

google.maps.event.addListener(marker,\'mouseover\', function() {
marker.setIcon("fileadmin/new_templates/images/home_map_notification_hover.png");
$.ajax({
type: "POST",
async : false,
data: \'address=\'+add ,
success: function(html){
infowindow.setContent(html);
infowindow.open(map,marker);
},
});
});
// On Mouse out
google.maps.event.addListener(infowindow, \'mouseout\', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});
// On Infowindow close
google.maps.event.addListener(infowindow, \'closeclick\', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});

How To shows Two column values ,when i selected location Maps

<script type="text/javascript">
function initialize1() {
var markers = JSON.parse('<%=FarmerMap()%>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].Lats, markers[0].Longs),
zoom: 10,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("FarmerMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Lats, data.Longs);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.BOUNCE
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.FarmerName,data.Area);
infoWindow.open(map, marker);
});
})(marker, data);
}
return true;
}
</script>
My question is infoWindow.setContent(data.FarmerName,data.Area); will not dispaly two columns values ..it shows only one column Name..that means FarmerName only...i want to shows farmername and area also...

Try this:
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent('<p>' + data.FarmerName
+ ', ' + data.Area + '</p>');
infoWindow.open(map, marker);
});