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

    @Manojsb_evon
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.33k
    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.

    1. <hmtl>
    2.     <head>
    3.         <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    4.         
    5.         <!-- Plz Your unique google map api key -->
    6.         <script src="https://maps.googleapis.com/maps/api/js?v=3&&key=API-KEY" type="text/javascript"></script>
    7.  
    8.         <style type="text/css">
    9.             #map{
    10.                 width: 100%;
    11.                 height: 900px;
    12.                 border: 0px;
    13.                 padding: 0px;
    14.             }
    15.         </style>
    16.     </head>
    17.  
    18.         <body>
    19.  
    20.             <section class="mappageList">
    21.                 <div>
    22.  
    23.                     <div class="google-mapsPage">
    24.  
    25.                         <div class="map-responsive">
    26.                            <!-- Define the div area on which the map will be loaded. -->
    27.                             <div id="map"></div>
    28.  
    29.                         </div>
    30.  
    31.                     </div>
    32.  
    33.                 </div>
    34.             </section>
    35.  
    36.             <script type="text/javascript">
    37.  
    38.             // Set initial latitude and longitude for map and starting point for marker.
    39.  
    40.             var lat_initial  = 30.56562;
    41.             var long_initial = 1.8805050;
    42.  
    43.             // Load initial map with initial latitude and longitude on page load.
    44.  
    45.             initMap();
    46.  
    47.             function initMap()
    48.             {
    49.                 map = new google.maps.Map(document.getElementById("map"), {
    50.  
    51.                     center: new google.maps.LatLng(lat_initial,long_initial),
    52.                     zoom: 5,
    53.                     mapTypeId: google.maps.MapTypeId.ROADMAP,
    54.                     mapTypeControl: true,
    55.                     mapTypeControlOptions:
    56.                     {
    57.                         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    58.                     },
    59.                     scrollwheel: true,
    60.                     navigationControl: true,
    61.                     scaleControl: false,
    62.                     disableDoubleClickZoom: true,
    63.                     zoomControl: true,
    64.                     zoomControlOptions: {
    65.                         position: google.maps.ControlPosition.RIGHT_TOP,
    66.                     },
    67.  
    68.                 });
    69.                         
    70.             }
    71.  
    72.             var INTERVAL = 1000;
    73.  
    74.             var markers_array = [];
    75.  
    76.             // Call function to update marker position after every second.
    77.  
    78.             getMarkers();
    79.  
    80.             function getMarkers() {
    81.  
    82.                 // Stop calling functional if markers are reached at certain constant value.
    83.  
    84.                 if ( lat_initial == '35.735619999999976' && long_initial== '7.990504999999995' ) {
    85.                      
    86.                      return false;   // exit the loop
    87.  
    88.                 } else {
    89.  
    90.                     // Change latitude and longitude values by adding some amount to previous values. You can put your own logic as desired according to requirement.  
    91.  
    92.                     lat_initial  = parseFloat(lat_initial)+0.11;
    93.  
    94.                     long_initial = parseFloat(long_initial)+0.13;
    95.  
    96.                     // remove old marker
    97.                     for(i=0; i<markers_array.length; i++){
    98.                         markers_array[i].setMap(null);
    99.                     }
    100.  
    101.                      // add new marker
    102.                     addMarkers(lat_initial, long_initial);
    103.                     
    104.                     // Call the function recursively after every second.
    105.  
    106.                     window.setTimeout(getMarkers,INTERVAL);
    107.                 }
    108.  
    109.             }
    110.             
    111.             // Function called to add markers on the map.
    112.             
    113.             function addMarkers(lats, longs) {
    114.  
    115.                 var marker = new google.maps.Marker({
    116.                     position: new google.maps.LatLng(lats, longs),
    117.                     map:map
    118.                 });
    119.  
    120.                 markers_array.push(marker);
    121.  
    122.             }
    123.  
    124.             
    125.  
    126.         </script>
    127.  
    128.             
    129.         </body>
    130. </html>
    html JQuery google map API moving markers
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: