Google Maps API：如何將兩個腳本合併爲一個？

Question

我正在嘗試使用Google Map API做很多事情： - 讓用戶能夠點擊並添加標記到地圖，將該位置保存到xml文件，然後發送電子郵件，座標爲 - 直接地址搜索（地理定位） - 可以打開或關閉多個KML圖層

我想用javascript/jquery/ajax和可能的PHP來寫入xml文件。

我發現這個在這裏一個例子：http://www.designing4u.de/2008/08/google-maps-jquery-and-xml-saving-markers-with-user-input/

但是，這是在API V2 - 我需要API V3。

通過以下鏈接可我已經想出那麼遠，

'http://www.powereng.com/visual/AEP/SAMPLEcode2.html' 
'http://www.powereng.com/visual/AEP/SAMPLEcode4.html' 

這是我在將這兩個一起嘗試：

'http://www.powereng.com/visual/AEP/SAMPLEcode5.html' 

我需要關於如何一些建議做到這一點 - 我有限的知識JavaScript語法。

任何幫助建立一些可以保存標記到XML文件的東西將不勝感激！

Answer 1

嘗試somethink像：

// INIT ALL VARS 
    var geocoder = new google.maps.Geocoder(); 
    var newmarker; 
    var map; 
    var kmlLayer = null; 
    var trafficLayer = null; 
    var bicyclingLayer = null; 
    var currentLayer = null; 

    function geocodePosition(pos) { 
     geocoder.geocode({ 
     latLng: pos 
     }, function(responses) { 
     if (responses && responses.length > 0) { 
      updateMarkerAddress(responses[0].formatted_address); 
     } else { 
      updateMarkerAddress('Cannot determine address at this location.'); 
     } 
     }); 
    } 

    function updateMarkerStatus(str) { 
     document.getElementById('markerStatus').innerHTML = str; 
    } 

    function updateMarkerPosition(latLng) { 
     document.getElementById('info').innerHTML = [ 
     latLng.lat(), 
     latLng.lng() 
     ].join(', '); 
    } 
    function updateMarkerLat(latLng) { 
     document.getElementById('latnew').innerHTML = [ 
     latLng.lat() 
     ]; 
    } 
    function updateMarkerLng(latLng) { 
     document.getElementById('lngnew').innerHTML = [ 
     latLng.lng() 
     ]; 
    } 

    function updateMarkerAddress(str) { 
     document.getElementById('address').innerHTML = str; 
    } 


// INITIALISE THE MAP 
function initialize() { 

    var latLng = new google.maps.LatLng(42.3726399, -71.1096528); // YOUR LAT/LONG 
    var map = new google.maps.Map(document.getElementById('mapCanvas'), { // YOUR MAP ID 
    zoom: 13, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // TRAFIC 
    trafficLayer  = new google.maps.TrafficLayer(); 
    bicyclingLayer = new google.maps.BicyclingLayer(); 
    kml('http://www.swepco.com/global/utilities/lib/data/kml/swepco/shipe-kings/FinalSixRoutesWithLabelsandEndpoints.kmz?t=asdfsd'); 


    function traffic() { 
    geocoder = new google.maps.Geocoder(); 
    map.setCenter(new google.maps.LatLng(40.7142691, -74.0059729)); 
    map.setZoom(12); 
    clearLayer(); 
    trafficLayer.setMap(map); 
    currentLayer = trafficLayer; 
    } 

    function bicycling() { 
    geocoder = new google.maps.Geocoder(); 
    map.setCenter(new google.maps.LatLng(42.3726399, -71.1096528)); 
    map.setZoom(14); 
    clearLayer(); 
    bicyclingLayer.setMap(map); 
    currentLayer = bicyclingLayer; 
    } 

    function kml() { 
    url = document.getElementById("kmlUrl").value; 
    clearLayer(); 
    kmlLayer = new google.maps.KmlLayer(url, { map: map }); 
    currentLayer = kmlLayer; 
    } 

    function clearLayer() { 
    if (currentLayer != null) { 
     currentLayer.setMap(null); 
    } 
    } 

    function kmlKeyUp(e) { 
    var keyCode; 

    if (window.event) { 
     keyCode = window.event.keyCode; 
    } else if (variable) { 
     keyCode = e.which; 
    } 

    if (keyCode == 13) { 
     document.getElementById("kmlUrl").blur(); 
     document.getElementById("kmlButton").click(); 
    } 
    } 

    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, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 



    // DBCLICK EVENT 
    google.maps.event.addListener(map, "dblclick", function(event) { 
     placeMarker(event.latLng); 
    }); 

    // ADD A MARKER 
    function placeMarker(location) { 
     var newmarker = new google.maps.Marker({ 
      position: location, 
      map: map, 
      draggable: true 
     }); 

    // CLICK EVENT  
    google.maps.event.addListener(newmarker, 'click', function() { 
    var form = 
     '<div id="bodyContent">'+ 
     '<b>New Map</b>' + 
     '<form method="post">'+ 
     '<table>'+ 
     '<tr><td>Name place :<input type="text" name="name"/></td></tr>'+ 
     '<tr><td>Latitude :<input type="text" name="latitude" value="' + newmarker.position.lat() + '"/></td></tr>'+ 
     '<tr><td>Longitude: <input type="text" name="longitude" value="' + newmarker.position.lng() + '"/></td></tr>'+ 
     '<tr><td><input type="submit" value="save"></td></tr>'+ 
     '</table>'+ 
     '</form>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: form, 
     maxWidth :500 
    }); 

    infowindow.open(map,newmarker); 
    }); 

     // Update current position info. 
     updateMarkerPosition(latLng); 
     updateMarkerLat(latLng); 
     updateMarkerLng(latLng); 
     geocodePosition(latLng); 

     // Add dragging event listeners. 
     google.maps.event.addListener(newmarker, 'dragstart', function() { 
      updateMarkerAddress('Dragging...'); 
     }); 

     google.maps.event.addListener(newmarker, 'drag', function() { 
      updateMarkerStatus('Dragging...'); 
      updateMarkerPosition(newmarker.getPosition()); 
      updateMarkerLat(newmarker.getPosition()); 
      updateMarkerLng(newmarker.getPosition()); 
     }); 

     google.maps.event.addListener(newmarker, 'dragend', function() { 
      updateMarkerStatus('Drag ended'); 
      geocodePosition(newmarker.getPosition()); 
      updateMarkerLat(newmarker.getPosition()); 
      updateMarkerLng(newmarker.getPosition()); 
     }); 
    } 


} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize);