javascript - google maps v3: how to drop markers, remove, loop again -

I'm studying Google Maps and I'd like to complete the following goal:

1) drop

3) Previous marker drop

4) Information window is opened in each marker

5) Repeat operation

Trying to trivialize the code and trying to set the map null (setmap), but the call is not successful after the call is done drop function Any suggestions on how to do it? Bottom line: Something like this, of course, it's a big step, which is pulling data from the database.

Here any help would be appreciated.

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; With marker animation & lt; Code & gt; Set timeout () & lt; / Code & gt; & Lt; / Title & gt; & Lt; Style & gt; # Map-canvas {width: 600px; Height: 600px; Status: "Completed"; Top: 0 pixels; Left: 0 pixels; Hidden flame ";} & lt; / style & gt; & lt; script src =" https://maps.googleapis.com/maps/api/js?v=3.exp&snsor=false "& gt; & lt; / script & gt; & LT; script & gt; Var Berlin = new google.maps.LatLng (52.520816, 13.410186); var group = [new google.maps.LatLng (52.511467, 13.447179), new google.maps .LatLng (52.549061, 13.422975), new google.maps.LatLng (52.497622, ​​13.396110), new google.maps.LatLng (52.517683, 13.394393)]; Var marker = []; Var iterator = 0; Var marker; Var map; function initialize () {var mapOptions = {zoom: 12, map type Id: GooglekmapskMapTypeIdkROADMAP, Center: Berlin}; map = new google.maps.Map (document.getElementById ( 'map-canvas' ), Map options); drop (); } Function drop () {for (var i = 0; i & lt; neighborhood; length; i ++) {var m = neighborhood [i]; (function (n) {setTimeout (function () {addMarker (n) ;}, i * 500);} (m));}} function addMarker () {markers.push (new google.maps.Marker ({position: neighborhood [iterator] map: map, draggable: false, animation : Google.maps.Animation.DROP})); Iterator ++; } Google.maps.event.addDomListener (window, 'load', start); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "map-canvas" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html   
 & gt;   
 
 
 Did you just want to display a marker at a time?  
 This is some code that does this:  
  $ (function () {var berlin = new google.maps.LatLng (52.520816), 13.410186); Var NEIGBORHOODS = [new google.maps.LatLng (52.511467, 13.447179), New google.maps.LatLng (52.549061, 13.422975), New google.maps.LatLng (52.497622, ​​13.396110), New google.maps.LatLng (52.517683 , 13.394393)]; Map above = null; Up marker = null; On index = 0; Var infoWindow = Null; Function createMap () {return new google.maps.Map (document.getElementById ( 'map-canvas'), {mapTypeId: google.maps.MapTypeId.ROADMAP, Center: Berlin, Zoom: 12});} function dropMarker ( Map, Status) {Return to new google.maps.Marker ({map: map, position: position, dragable: false, animation: google.maps.Animation.DROP});} function changeMarker () {if (marker) { InfoWindow.close (); Marker.setMap (zero);} position on = NEIGBORHOODS [index]; Marker = dropMarker (map, pause); InfoWindow.setContent ('lat:' + pos.lat () + '
' + 'lng:' + pos.lng ()); SetTimeout (function () {infoWindow.open (map, marker);}, 500); Index = (index + 1)% NEIGBORHOODS.length; SetTimeout (function () {changeMarker ();}, 2000); } Map = createMap (); InfoWindow = new google.maps.InfoWindow () changeMarker (); });   
 Note that the  changeMarker ()  function does its job, then call again  setTimeout ()  It sets an infinite loop where  changeMarker ()  is called every two seconds.  
 I used  setTimeout ()  to delay displaying the usage window for half a second until it is finished.