How to move markers on a google map api without clicking on any object ?
The above can be achieved with simple logic . ie update the marker position after a particular time ( Let say 1 second in our example )
The following HTML and jquery code will help to achieve the moving marker functionality.
Note : You will require a google map API key to pass in the script.
<hmtl>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<!-- Plz Your unique google map api key -->
<script src="https://maps.googleapis.com/maps/api/js?v=3&&key=API-KEY" type="text/javascript"></script>
<style type="text/css">
#map{
width: 100%;
height: 900px;
border: 0px;
padding: 0px;
}
</style>
</head>
<body>
<section class="mappageList">
<div>
<div class="google-mapsPage">
<div class="map-responsive">
<!-- Define the div area on which the map will be loaded. -->
<div id="map"></div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
// Set initial latitude and longitude for map and starting point for marker.
var lat_initial = 30.56562;
var long_initial = 1.8805050;
// Load initial map with initial latitude and longitude on page load.
initMap();
function initMap()
{
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lat_initial,long_initial),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
scrollwheel: true,
navigationControl: true,
scaleControl: false,
disableDoubleClickZoom: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
});
}
var INTERVAL = 1000;
var markers_array = [];
// Call function to update marker position after every second.
getMarkers();
function getMarkers() {
// Stop calling functional if markers are reached at certain constant value.
if ( lat_initial == '35.735619999999976' && long_initial== '7.990504999999995' ) {
return false; // exit the loop
} else {
// Change latitude and longitude values by adding some amount to previous values. You can put your own logic as desired according to requirement.
lat_initial = parseFloat(lat_initial)+0.11;
long_initial = parseFloat(long_initial)+0.13;
// remove old marker
for(i=0; i<markers_array.length; i++){
markers_array[i].setMap(null);
}
// add new marker
addMarkers(lat_initial, long_initial);
// Call the function recursively after every second.
window.setTimeout(getMarkers,INTERVAL);
}
}
// Function called to add markers on the map.
function addMarkers(lats, longs) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lats, longs),
map:map
});
markers_array.push(marker);
}
</script>
</body>
</html>
0 Comment(s)