Automatically Moving Marker using random co-ordinates.

633 views

Skip to first unread message

amplifire

unread,

Jan 2, 2011, 12:04:17 PM1/2/11

to Google Maps JavaScript API v3

Hello Everyone!
I have this problem that i want my marker to move automatically
(without page being refreshed) using any random co-ordinates.

I generate two random numbers. One for the Latitude and another for
the longitude. Although the markers are getting created but older
markers also remain on the map. I just want latest markers to appear
and older markers to vanish. here is my code please see if anything
could be done:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">



#Layer1 {
position:absolute;
width:51px;
height:18px;
z-index:10;
left: 6px;
top: 90%;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
//function to get random number upto m
function randomXToY(minVal,maxVal,floatVal) ///I did this
{
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?
Math.round(randVal):randVal.toFixed(floatVal);
}

var latlng = new google.maps.LatLng(25.179249,75.83725);
var myOptions = {zoom: 16, center: latlng, mapTypeId:
google.maps.MapTypeId.HYBRID};//ROADMAP

var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

///////////////////DELETE FROM HERE (This is my Code for marker)
function autoUpdate()
{
var marker = null;
var latitude=randomXToY(25.178900,25.179500,6); // I did this
var longitude=randomXToY(75.836000,75.838500,6);

latlng = new google.maps.LatLng(latitude,longitude);

if (marker) {
// Marker already created - Move it
//marker.setPosition(latlng);
marker.setMap(null);
}
/*
else {
// Marker does not exist - Create it
marker.setMap(null);
marker = new google.maps.Marker({position: latlng, map: map});//,
icon: "bluebutton.png"});
}*/

marker = new google.maps.Marker({position: latlng, map: map});
map.setCenter(latlng);
setTimeout(autoUpdate, 3000);
}

autoUpdate();
///////////////////////////////TO HERE
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width:100%; height:90%; top:10%">
</div>
<div id="Layer1" style="top:0%">
<input type="submit" name="Submit" value="Submit">
</div>
</body>
</html>

Rossko

unread,

Jan 2, 2011, 9:27:26 PM1/2/11

to Google Maps JavaScript API v3

> I have this problem that i want my marker to move automatically
> (without page being refreshed) using any random co-ordinates.

Make your 'marker' variable global in scope, so that it persists
between calls of the update function

Reply all

Reply to author

Forward

0 new messages