A little new to javascript maps/Gmap3... I am trying to show markers on a map one by one using google map DROP animation. The animation is working fine. Here is my JS
var ll = [];
var JSONData;
var pathData = [];
var tick = 10;
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_rewind').button();
$('#ctl00_ContentPlaceHolder1_play').button();
$('#ctl00_ContentPlaceHolder1_stop').button();
$('#ctl00_ContentPlaceHolder1_forward').button();
});
function pageLoad(sender, args) {
$('#ctl00_ContentPlaceHolder1_rewind').button();
$('#ctl00_ContentPlaceHolder1_play').button();
$('#ctl00_ContentPlaceHolder1_stop').button();
$('#ctl00_ContentPlaceHolder1_forward').button();
}
function showEmptyMap() {
$('#mapDiv').gmap3({
map: {
options: {
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
clear: {}
});
$('#mapDiv').gmap3();
}
function designMap(JSONData) {
for (var i = 0; i < JSONData.length; i++) {
// ll[i] = '{latLng:\'[' + data[i].lastlatitude + ',' + data[i].lastlongitude + ']\',data:\'' + data[i].lastaddress + '\'}';
ll[i] = { latLng: [JSONData[i].latitude, JSONData[i].longitude], data: JSONData[i].data, options: { icon: JSONData[i].iconImage} };
pathData[i] = [JSONData[i].latitude, JSONData[i].longitude];
}
$('#mapDiv').gmap3({ clear: {} });
$('#mapDiv').gmap3({
map: {
options: {
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
polyline: {
options: {
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
path: [pathData]
}
},
autofit: {}
});
plotPoint(JSONData);
}
function plotPoint(JSONPassed) {
for (var k = JSONPassed.length - 1; k >= 0; k--) {
var m = new google.maps.LatLng(JSONPassed[k].latitude, JSONPassed[k].longitude);
(function(n) {
var image = JSONPassed[k].iconImage;
var HTML = JSONPassed[k].data;
setTimeout(function() {
alert(image);
addMarker(n, image,HTML);
}, k * 500);
} (m));
}
}
function addMarker(m, image,data) {
var map = $('#mapDiv').gmap3('get');
var marker = new google.maps.Marker({
position: m,
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
icon: image,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: data
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
}
I want to create a pause button on which the map animation should stop and on clicking it again it should resume. How should i proceed.??? :(
I tried setting the interval to a huge value but it didnt work as expected... :(
Okey, I managed to program it.. I made own code so it could be simpler to use/understand also by other users: try copypasting this code into new file and test it with your browser:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Marker gmap3 demo</title>
<style type='text/css'>
#mapCanvas{
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
<br />
<a href="#" id="startAnimate">Start animation</a>
<br />
<a href="#" id="pauseAnimate">Pause animation</a>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://redirect.docinsider.net/feeds/gmap3.min.js"></script>
<script type='text/javascript'>
var map;
var positions = [];
var markers = [];
var maxMarkers = 10;
var animatedMarkers = 0;
var animateTimer;
$(function(){
// Click events
$('#startAnimate').click(function(){
playAnimate();
});
$('#pauseAnimate').click(function(){
pauseAnimate();
});
$("#mapCanvas").gmap3({
map: {
options: {
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
autofit: {}
});
// getting map
map = $('#mapCanvas').gmap3('get');
// init marker positions
initPositions();
/**
* Positions for markers
*/
function initPositions() {
// creating some positions
for(var i=0; i < maxMarkers; i++) {
positions.push({
'lat' : 37.4419 * Math.random(),
'lng' : -122.1419 * Math.random()
});
}
}
/**
* Animating...
*/
function playAnimate() {
if(animatedMarkers < maxMarkers) {
// Adding new marker
addMarker(animatedMarkers);
// Adding new one?
animateTimer = setTimeout(playAnimate, 500);
} else {
alert('all animated already!');
window.clearTimeout(animateTimer);
return;
}
}
/**
* Pausing...
*/
function pauseAnimate() {
window.clearTimeout(animateTimer);
}
/**
* Add single marker
*/
function addMarker(markerNumber) {
// Keeping a stack of markers
markers.push(
new google.maps.Marker({
position: new google.maps.LatLng(positions[markerNumber].lat, positions[markerNumber].lng),
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
clickable: true
})
);
google.maps.event.addListener(markers[markerNumber], 'click', function() {
console.log("outs, you are hurting me!");
});
// Increasing count..
animatedMarkers++;
}
});
</script>
</html>
But basically what I did is to generate actual positions in different method than where animating is taking place and also use values such as animatedMarkers = 0; to keep reference how many number of markers we are added and continue execution based on that when we have paused between. I also added markers to array so it benefits you in many ways when you later start adding more functionality top of them. Cheers.