$( ->
  $("input.location_picker").each( (i)->
    location_input = $(this)
    map_div = $('<div>').addClass("location_picker_map")
 
    location_input.before(map_div)
    #this.parentNode.insertBefore(map_div, this)
    location_input.hide()

    lat = 52.07436798080633
    lng = 4.316811561584473
    if (this.value.split(',').length == 2)
      values = this.value.split(',')
      lat = values[0]
      lng = values[1]
    center = new google.maps.LatLng(lat,lng)
    mapOptions =
      zoom: 13
      center: center
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoomControl: true
      zoomControlOptions:
        style: google.maps.ZoomControlStyle.SMALL
      mapTypeControl: false
      panControl: false
      scaleControl: false
      streetViewControl: false
      
    map = new google.maps.Map(map_div.get(0), mapOptions)
    marker = new google.maps.Marker(
      position: center
      map: map
      title: 'Location'
    )
    google.maps.event.addListener(map, 'click', (point)->
      marker.setPosition(point.latLng)
      location_input.val point.latLng.lat() + ','+ point.latLng.lng()
    )
  )
)