Join objects properties

Question

The following function works but I am looking into improving the code. The first thing I would like to do is to remove the style inside "myOption" object to load them before and only leave the content as I need to get the data back from the AJAX call.

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          draggable: true,
          position: results[0].geometry.location
      });

      var marker = new google.maps.Marker({
          position: marker.position,
          map: map,
          title: results[0].formatted_address
      });
      $.ajax({
        url: url+marker.position.ob+","+marker.position.pb+"",
        dataType: "jsonp",
        success: function (data) {
          var myOptions = {
               content: template(data)
              ,disableAutoPan: true
              ,maxWidth: 0
              ,pixelOffset: new google.maps.Size(-240, 0)
              ,zIndex: null
              ,boxStyle: { 
                background: "url('tipbox.gif') no-repeat"
                ,opacity: 0.9
                ,width: "454px"
               }
              ,closeBoxMargin: "10px 10px 2px -20px"
              ,closeBoxURL: "assets/image/x.png"
              ,infoBoxClearance: new google.maps.Size(1, 1)
              ,isHidden: false
              ,pane: "floatPane"
              ,enableEventPropagation: false
          };
          var ib = new InfoBox(myOptions);
          ib.open(map, marker);
        }
      });

    } 
    else {
      alert('Geocode was not successful for the following reason: ' + status);
    }

  });
}

I was thinking creating a style object and load it before the AJAX call and than join it with the object containing the data to than pass a single object inside "new InfoBox(NewObject)"

Any ideas on how to do this or perhaps is there a different/better way?

Full script

Answer 1

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      /*
       * This is overwritten below
      var marker = new google.maps.Marker({
          map: map,
          draggable: true,
          position: results[0].geometry.location
      });
      */
      var marker = new google.maps.Marker({
              position: marker.position,
              map: map,
              title: results[0].formatted_address
          }),
          myOptions = {
              disableAutoPan: true,
              maxWidth: 0,
              pixelOffset: new google.maps.Size(-240, 0),
              zIndex: null,
              boxStyle: {
                  background: "url('tipbox.gif') no-repeat",
                  opacity: 0.9,
                  width: "454px"
              },
              closeBoxMargin: "10px 10px 2px -20px",
              closeBoxURL: "assets/image/x.png",
              infoBoxClearance: new google.maps.Size(1, 1),
              isHidden: false,
              pane: "floatPane",
              enableEventPropagation: false
          };

      $.ajax({
          url: url+marker.position.ob+","+marker.position.pb+"",
          dataType: "jsonp",
          success: function (data) {
              myOptions.content = template(data);
              var ib = new InfoBox(myOptions);
              ib.open(map, marker);
          }
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }

  });
}