Google Maps Marker Animations is not woking

Google Maps Marker Animations is not woking - javascript

This code working but when I mouse click each marker, Marker not Animation BOUNCE.
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: new google.maps.MarkerImage(locations[i][5]),
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}
animation: google.maps.Animation.BOUNCE
}) (marker, i));
Markers[locations[i][4]] = marker;
}

set the animation in the click-callback:
return function() {
//set the animation
this.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}

Related

How make when click marker scroll to sidebar item?

I want, when user click marker, sidebar scrolling the item what user click..like this web https://googlemaps.github.io/js-store-locator/examples/places.html
....but how do this? any idea thanks..
This div with map id & side_bar id.
<div style="width:100%; height:100vh;padding-bottom: 50px; ">
<div id="map" style="top:50px;height:100%;width:80%;float:left"></div>
<div id="side_bar" style="top:50px;width:20%;float:left;overflow-y: scroll; height:100%;margin-top:50px;padding:20px"></div>
</div><!-- Map Ends display -->
Add infowindow click from php data & add item in side_bar id
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
visible: true,
animation: google.maps.Animation.DROP,
icon : icons[locations[i][4]],
});
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
var side_bar_html = "<a href='javascript:google.maps.event.trigger(markers["+parseInt(markers.length-1)+"],\"click\");'style='text-decoration:none;'>"+locations[i][0]+"</a><br><hr><br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}

I found the solution. I add This
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
var no = marker.id;
$("div[class*='item']").removeClass("active");
$('div[class*=item_'+no+']').addClass("active");
var $selectedLocation = $('div[class*=item_'+no+']' );
var $container = $('#side_bar');
$container.animate({
scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
});
}
})(marker, i));
and add to my id marker

Clustering markers with infowindow in googlemaps v3 api

I cant get the ClustererMarker to work. I want markers to cluster when they are close to each other and I have found:
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
But I cant get them to work with my code, either all markers disappear or only one is visible (not in the correct way). I hope someone can help me with my problem.
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

var gmarkers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);

Fix Size in Google Map

I am Integrating google map.When I hover on marker it shows me location on marker.But my problem is when I hover on marker map moves. I want when I hover on marker position should be fixed.Here is My code:
function CreateMarker(Obj){
var $j=jQuery.noConflict();
var pos;
var allMarkers = [];
pos = new google.maps.LatLng(Obj['latitude'], Obj['longitude']);
var marker = new google.maps.Marker({
position: pos,
map: map,
zoom:14,
icon: gicons["blue"]
});
latlngbounds.extend(pos);
var str = '<div class="google_popup"><span style="color:#00aeef; font-weight:bold; font-size: 14px; ">'+Obj['name']+'</span></b><div>'+Obj['address']+'</div><div>'+Obj['city']+', '+Obj['state']+' '+Obj['zip']+'</div><div> '+Obj['email']+'</div><div>'+Obj['phone']+'</div></div>';
google.maps.event.addListener(marker, "click", function() {
map.panTo(pos);
map.setZoom(14);
info.setContent(str);
info.open(map, marker);
//openTrInfo($("#" + Obj['elemID'])[0], false);
var emid=Obj['elemID'];
merchant_deals(emid);
});
google.maps.event.addListener(marker, "mouseover", function () {
marker.setIcon(gicons["grey"]);
// map.panTo(pos);
info.setContent(str);
info.open(map, marker);
var emid=Obj['elemID'];
});
google.maps.event.addListener(marker, "mouseout", function () {
marker.setIcon(gicons["blue"]);
info.close(map, marker);
});
gmarkers.push(marker);
return marker;
}

When you create your infowindow, set the disableAutoPan property to false. By default this is true, so the map automatically pans when the infowindow opens, when you do info.open(map, marker);
https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions

var info = new google.maps.InfoWindow();
var info = new google.maps.InfoWindow({
disableAutoPan: true
});

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

Google map info window on wrong locations

I'm following this code for Multiple Markers in Google map, my problem is once I put my data in the map their info window are all in the wrong coordinates, they seem scrambled. I am using US as my center. So here is the code below:
var locations = [
['Russ Martin</br>Montana',43.299428,-74.217933],
['Carey Fischer</br>New York',46.879682,-110.362566],
['Brandon Born</br>Connecticut',40.714353,-74.005973],
['Joe Tocyloski</br>Pennysylvania',41.603221,-73.087749]
];
var us = new google.maps.LatLng(42.746632,-75.770041);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: us,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
/*icon:{
strokeColor:'green',
scale:3
},*/
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.close(map, marker);
}
})(marker, i));
console.log(locations);
}
Any help would be appreciated.
Fiddle

below statement may
this will surely help u
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, this);
}

Develop Reference

JavaScript is the programming language of the Web.

Google Maps Marker Animations is not woking - javascript

set the animation in the click-callback: return function() { //set the animation this.setAnimation(google.maps.Animation.BOUNCE); infowindow.setContent(locations[i][1]); infowindow.setOptions({maxWidth: 500}); infowindow.open(map, marker); }

Related

How make when click marker scroll to sidebar item?

Clustering markers with infowindow in googlemaps v3 api

Fix Size in Google Map

animated gif in array in google map

Google map info window on wrong locations

Categories

Resources