Guidance Needed dropping map pins with timeout

Trying to do multiple pins with timeout so it looks cooler but it not working

I think the glitch might be in the assigning of the map as home or a simple var definition issue Anything you can see thats off let me know. I think the animations should be pretty cool and the button method should make sure you see it rather than it dropped already before you scroll down far enough to see it. someting is broken tho

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
    <title>LANDMARK LOCATIONS <code>setTimeout()</code></title>
    <style>
      #map-canvas {
        width: 100%;
        height: 400px;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
      var home = new google.maps.LatLng(39.9176356,-99.3003073);

var neighborhoods = [
  new google.maps.LatLng(46.448114-96.736079),
new google.maps.LatLng(45.46104-98.488264),
new google.maps.LatLng(45.460888-98.498119),
new google.maps.LatLng(44.363302-97.134493),
new google.maps.LatLng(43.760871-96.778317),
new google.maps.LatLng(46.888705-103.194951),
new google.maps.LatLng(44.670711-103.850721),
new google.maps.LatLng(43.839003-101.283079),
new google.maps.LatLng(46.832538-100.76937),
new google.maps.LatLng(46.836574-100.781966),
new google.maps.LatLng(30.325508-96.157669),
new google.maps.LatLng(39.094627-94.437796),
new google.maps.LatLng(31.0451-97.165565)
];

var markers = [];
var map;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: home
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
}

function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="panel" style="margin-left: 42%">
      <button id="drop" onclick="drop()">Drop LANDMarkers</button>
     </div>
    <div id="map-canvas"></div>
  </body>
</html>

Solution

You have typos in your code (missing commas, a google.maps.LatLng takes two arguments):

var neighborhoods = [
new google.maps.LatLng(46.448114-96.736079),
new google.maps.LatLng(45.46104-98.488264),
new google.maps.LatLng(45.460888-98.498119),
new google.maps.LatLng(44.363302-97.134493),
new google.maps.LatLng(43.760871-96.778317),
new google.maps.LatLng(46.888705-103.194951),
new google.maps.LatLng(44.670711-103.850721),
new google.maps.LatLng(43.839003-101.283079),
new google.maps.LatLng(46.832538-100.76937),
new google.maps.LatLng(46.836574-100.781966),
new google.maps.LatLng(30.325508-96.157669),
new google.maps.LatLng(39.094627-94.437796),
new google.maps.LatLng(31.0451-97.165565)];

Should be:

var neighborhoods = [
new google.maps.LatLng(46.448114,-96.736079),
new google.maps.LatLng(45.46104,-98.488264),
new google.maps.LatLng(45.460888, -98.498119),
new google.maps.LatLng(44.363302, -97.134493),
new google.maps.LatLng(43.760871, -96.778317),
new google.maps.LatLng(46.888705, -103.194951),
new google.maps.LatLng(44.670711, -103.850721),
new google.maps.LatLng(43.839003, -101.283079),
new google.maps.LatLng(46.832538, -100.76937),
new google.maps.LatLng(46.836574, -100.781966),
new google.maps.LatLng(30.325508, -96.157669),
new google.maps.LatLng(39.094627, -94.437796),
new google.maps.LatLng(31.0451, -97.165565)];

working fiddle