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
    • 372
    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.

    <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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: