Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Create Moving Marker Functionality on Google Map with jQuery and HTML

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.24k
    Comment on it

    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.

            <script src=""></script>
            <!-- Plz Your unique google map api key -->
            <script src="" type="text/javascript"></script>
            <style type="text/css">
                    width: 100%;
                    height: 900px;
                    border: 0px;
                    padding: 0px;
                <section class="mappageList">
                        <div class="google-mapsPage">
                            <div class="map-responsive">
                               <!-- Define the div area on which the map will be loaded. -->
                                <div id="map"></div>
                <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.
                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,
                            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.
                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++){
                         // add new marker
                        addMarkers(lat_initial, long_initial);
                        // Call the function recursively after every second.
                // 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),

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: