I am new at Google Maps technologies.I want to blink or bounce google maps marker for a time interval for example one minute.Is it possible to do it? Could you please show me a way to succeed it?
The google.maps.Marker class supports setAnimation(animation:Animation) method, which according to the docs:
Start an animation. Any ongoing animation will be cancelled. Currently
supported animations are: BOUNCE, DROP. Passing in null will cause any
animation to stop.
So you can just call
marker.setAnimation(google.maps.Animation.BOUNCE);
to start bouncing animation and
marker.setAnimation(null);
to stop it. Working example:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
marker.setAnimation(google.maps.Animation.BOUNCE);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body onload="initMap();" style="margin:0px; padding:0px;" >
<div id="map" style="height:400px; width:500px;"></div>
</body>
Blinking animation is not supported out of the box, but you can create it yourself, the example is already included in other answers.
may cause errors. (using googlemap without apikey)
var on = true;
var intervalSeconds = 0.5;
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
setInterval(function() {
if(on) {
marker.setMap(null);
} else {
marker.setMap(map);
}
on = !on;
}, intervalSeconds * 1000);
#map {
width: 800px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
I suggest for blinking maps marker you can use .gif file since google maps marker does not support blinking animation.
Just change the source of your image to .gif file and it will work.
for example.
var mapIcon= "/assets/mapIcon.gif");
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: mapIcon,
optimized: false
});
[NOTE] Don't forget to add optimized: false because sometimes it will not work properly.
Related
First I checked without setTimeout function google map API is fully loaded or not using map idle function. it's working fine. but I tried using the setTimeout function in the google map loading page. the map is loaded successfully. but map idle function is not working on how to fix this issue.
Code.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
setTimeout(function(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
},2000);
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('hi')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
})
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 4,
// center: myLatLng
// });
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
</script>
</body>
</html>
How to achieve this scenario.
You can use the tilesloaded event of the Maps Javascript API Events. The tilesloaded is used to detect when the map has been fully loaded. A sample POC below using your current implementation.
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
map.addListener('tilesloaded', function() {
console.log('map is loaded');
});
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('map is idle')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
});
}
If this doesn't help you, you can also check the answer from this Stackoverflow question How can I check whether Google Maps is fully loaded?. It appears a lot of users were also experiencing this issue before.
Hope this information find you helpful and good luck on your applicaion!
Use titesloaded event to listen to complete map load.
I want to show a location on google map but nothing show :
<script src="****/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvUNbVZUPT_8V-VMCcfI9aex3ygZO4J7U"></script>
jQuery(document).ready(function($) {
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 35.706291,
GOOGLE_MAP_LNG = 51.316624;
var map,
service;
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
});
my html code :
<div id="#map-canvas" style="width: 300px;height: 400px"> </div>
to see my website:
http://www.eleconf.ir/
my console log is empty.
In your html, the ID of div is given as #map-canvas. # is not required.
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
I am trying to make marker moving and get lat lng. My code works correctly.but Now I want to set my map center as my current location. I am trying with geo location code but when i add getCurrentPosition then map not showing.
my moving marker map code is
var marker, map;
function initialize() {
var myLatlng = new google.maps.LatLng(53.871963457471786,10.689697265625);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
$(function() {
initialize();
google.maps.event.addListener(map, 'click', function(event) {
var lat=event.latLng.lat();
var lng=event.latLng.lng();
$('#latlng').val(lat+', '+lng);
marker.animateTo(event.latLng);
});
});
<input type="text" id="latlng" size="40" /><br />
<div id="map_canvas"></div>
This should be enough...
navigator.geolocation.getCurrentPosition(function(position) {
var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
//handle no geolocation
});
Just make sure you run this after the map is created.
By the way this is from Google Maps docs.
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>