API Google Maps - две службы геокодирования внутри одной карты

Я пытаюсь использовать две службы геокодирования внутри одной карты (1 для перетаскиваемого маркера и 1 для простого геокодирования по текстовому полю), но у меня нет никакого результата (маркер) для простого геокодирования по текстовому поле внутри моей карты, и я не могу найти причину этого. Код ниже:API Google Maps - две службы геокодирования внутри одной карты

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Free Camping</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
    <script type="text/javascript"> 
<!-- 
//<![CDATA[ 

//*** Markers cluster 1/3 - Start *** // 
var markerscluster = []; 
//*** Markers cluster 1/3 - End *** // 

var geocoder2; 

//*** Dragable Marker 1/3 - Start *** // 
var geocoder = new google.maps.Geocoder(); 

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').value = [ 
    latLng.lat(), 
    //latLng.lng() 
    ].join(', '); 
    document.getElementById('info2').value = [ 
    //latLng.lat(), 
    latLng.lng() 
    ].join(', '); 
} 

function updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 
//*** Dragable Marker 1/3 - End *** // 



function load() { 

//*** Styled Maps 1/2 - Start *** // 
    var styles = [ 
    { 
    }, 
    { 
    "featureType": "landscape", 
    "stylers": [ 
     { "hue": "#ffa200" }, 
     { "saturation": 27 }, 
     { "gamma": 0.34 }, 
     { "lightness": 26 } 
    ] 
    },{ 
    "featureType": "administrative.country", 
    "stylers": [ 
     { "hue": "#ff1100" }, 
     { "saturation": 45 }, 
     { "lightness": -20 }, 
     { "gamma": 1.82 } 
    ] 
    },{ 
    "featureType": "administrative.province", 
    "stylers": [ 
     { "hue": "#ff1100" }, 
     { "lightness": -21 }, 
     { "gamma": 0.91 }, 
     { "saturation": 14 } 
    ] 
    },{ 
    "featureType": "administrative.locality", 
    "stylers": [ 
     { "hue": "#0008ff" }, 
     { "saturation": 15 }, 
     { "lightness": -26 }, 
     { "gamma": 0.74 } 
    ] 
    },{ 
    "featureType": "water", 
    "stylers": [ 
     { "gamma": 2.01 }, 
     { "lightness": -70 } 
    ] 
    } 
]; 

var styledMap = new google.maps.StyledMapType(styles, 
    {name: "Styled Map"}); 
//*** Styled Maps 1/2 - End *** // 

     var latLng = new google.maps.LatLng(-25.878994,134.018553); 
     geocoder2 = new google.maps.Geocoder(); 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: latLng, 
     zoom: 4, 
     mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
     }); 


//*** Styled Maps 2/2 - End *** // 
     map.mapTypes.set('map_style', styledMap); 
     map.setMapTypeId('map_style'); 
//*** Styled Maps 2/2 - End *** // 


     // Change this depending on the name of your PHP file 
     downloadUrl("free_camping_phpsql.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var category = markers[i].getAttribute("category"); 
      var name = markers[i].getAttribute("name"); 
      var street = markers[i].getAttribute("street"); 
      var locality = markers[i].getAttribute("locality"); 
      var description = markers[i].getAttribute("description"); 
      var image = markers[i].getAttribute("image"); 
      var toilet = markers[i].getAttribute("toilet"); 
      var bbq = markers[i].getAttribute("bbq"); 
      var able = markers[i].getAttribute("able"); 
      var tentok = markers[i].getAttribute("tentok"); 
      var caravanok = markers[i].getAttribute("caravanok"); 
      var dumppoint = markers[i].getAttribute("dumppoint"); 
      var shade = markers[i].getAttribute("shade"); 
      var water = markers[i].getAttribute("water"); 
      var swimming = markers[i].getAttribute("swimming"); 
      var fishing = markers[i].getAttribute("fishing"); 
      var hiking = markers[i].getAttribute("hiking"); 
      var mobileok = markers[i].getAttribute("mobileok"); 
      var name2 = markers[i].getAttribute("name2"); 
      var email = markers[i].getAttribute("email"); 
      var lat = markers[i].getAttribute("lat"); 
      var lng = markers[i].getAttribute("lng"); 

      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 

     var html = 
     '<img src="Free-Camping/images2/amenitiesicons/'+toilet+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+bbq+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+able+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+tentok+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+caravanok+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+dumppoint+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+shade+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+water+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+swimming+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+fishing+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+hiking+'" >' 
     + '<img src="Free-Camping/images2/amenitiesicons/'+mobileok+'" >' + '<br>' 

     + '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>' 
     + '<p style="font-family: calibri, corbel, verdana; color: #ofofof; font-size: 14px; text-align: left">' + street + '<br>' 
     + locality + '<br>' 
     + lat + ', &nbsp;' + lng + '</p>' 
     + '<img src="Free-Camping/images/'+image+'" height=80;>' + '<br>' 
     + '<a href="Free-Camping/images/'+image+'" target="_blank">(enlarge image)' + '</a>' 
     + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description + '</p>' 
     // Checkbox 
     ; 


     var infoWindow = new google.maps.InfoWindow({ 
     content: html, 
     maxWidth: 380 
     }); 



var customIcons = { 
     "1": { 
     icon: 'Free-Camping/markers/RoadsideRestArea.png', 
     },  
     "2": { 
     icon: 'Free-Camping/markers/BushCampingSite.png', 
     }, 
     "3": { 
     icon: 'Free-Camping/markers/ParkForestReserve.png', 
     }, 
     "4": { 
     icon: 'Free-Camping/markers/PrivateCampingSite.png', 
     }, 
     "5": { 
     icon: 'Free-Camping/markers/BeachCampingSite.png', 
     }, 
      "6": { 
     icon: 'Free-Camping/markers/BeachCampingSite.png', 
     } 
    }; 

      var icon = customIcons[category] || {}; 

      var marker = new google.maps.Marker({ 
      //map: map, 
      position: point, 
      icon: icon.icon, 
      }); 

//*** Markers cluster 2/3 - Start *** // 
markerscluster.push(marker); 
//*** Markers cluster 2/3 - End *** // 

     bindInfoWindow(marker, map, infoWindow, html); 
     } 

//*** Markers cluster 3/3 - Start *** // 
var markerCluster = new MarkerClusterer(map, markerscluster, { 
    gridSize: 60, 
    minimumClusterSize: 1, 
    maxZoom: 5 
}); 
//*** Markers cluster 3/3 - End *** // 


//*** Dragable Marker 2/3 - Start *** // 
     var marker2 = new google.maps.Marker({ 
     position: latLng, 
     title: 'Point A', 
     map: map, 
     draggable: true 
     }); 

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

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

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

    google.maps.event.addListener(marker2, 'dragend', function() { 
    updateMarkerStatus('Drag ended'); 
    geocodePosition(marker2.getPosition()); 
    }); 
//*** Dragable Marker 2/3 - End *** // 

     }); 
    } 


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

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


    //*** Dragable Marker 3/3 - Start *** // 
    // Onload handler to fire off the app. 
    google.maps.event.addDomListener(window, 'load'); 
    //*** Dragable Marker 3/3 - End *** // 


    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 

//]]> 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
//--> 
</script> 


</head> 

<body onload="load();"> 

<div id="main_layer" style="position:absolute; left:0; top:0px; width:788px; height:1655px; margin-left: 0px;"> 

<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame"> 
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Free-Camping/images2/MapCentreIcon_2.png',1)"><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></a></div> 
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div> 


<div id="legend" style="position:absolute; top:555px; width:760px; height:27px; margin-left: 10px;"> 

<div id="text Beach Camping Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 27px;"><span class="legend_text">Beach Camping Site</span> 
</div> 

<div id="text Bush Camping Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 179px;"><span class="legend_text">Bush Camping Site</span> 
</div> 

<div id="text Park Forest Reserve" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 331px;"><span class="legend_text">Park Forest Reserve</span> 
</div> 

<div id="text Private CampingS Site" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 483px;"><span class="legend_text">PrivateCampingSite</span> 
</div> 

<div id="text Roadside Rest Area" style="position:absolute; top:2px; width:100px; height:15px; margin-left: 635px;"><span class="legend_text">Roadside Rest Area</span> 
</div> 
<img src="Free-Camping/images2/background-legend.png" width="760" height="27"></div> 


<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1030px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form"> 
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data"> 

<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:255px;" class="form2"> 
    <p align="center" class="headers">Add a New Free Camping Site</p> 
    <p align="center"><span class="text">Your Name:</span>  <input type="text" name="name2" /> 
     <br> 
     <br> 

     <span class="text">Your Email:</span> 
     <input type="text" name="email" /> 
    <br> 
    <br> 

    <span class="text">Campsite name:</span> 
    <input type="text" name="name" /> 
    <br> 
    <br> 

    <span class="text">Type of Campsite:</span> 
    <select name="category"> 
    <option value="5">Beach Camping Site</option> 
    <option value="2">Bush Camping Site</option> 
    <option value="3">Park Forest Reserve</option> 
    <option value="4">Private Camping Site</option> 
    <option value="1">Roadside Rest Area</option> 
    </select> 
    <p align="center" class="text"> 
    <label>Upload Picture</label> 
<input type="file" name="image" /><br> 
</div> 

<div id="form" style="position:absolute; left:14; top:255px; width:760px; height:150px;" class="form2"> 
    <p align="center" class="headers">Select Campsite Amenities</p> 
    <p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44"> </p> 

    <div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="toilet" value="No"> 
    <input type="checkbox" name="toilet" value="toilet.png"> 
    </div> 

    <div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="bbq" value="No"> 
    <input type="checkbox" name="bbq" value="bbq.png"> 
    </div> 

    <div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="able" value="No"> 
    <input type="checkbox" name="able" value="able.png"> 
    </div> 

    <div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="tentok" value="No"> 
    <input type="checkbox" name="tentok" value="tent.png"> 
    </div> 

    <div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="caravanok" value="No"> 
    <input type="checkbox" name="caravanok" value="caravan.png"> 
    </div> 

    <div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="dumppoint" value="No"> 
    <input type="checkbox" name="dumppoint" value="dumppoint.png"> 
    </div> 

    <div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="shade" value="No"> 
    <input type="checkbox" name="shade" value="shade.png"> 
    </div> 

    <div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="water" value="No"> 
    <input type="checkbox" name="water" value="water.png"> 
    </div> 

    <div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="swimming" value="No"> 
    <input type="checkbox" name="swimming" value="swimming.png"> 
    </div> 

    <div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="fishing" value="No"> 
    <input type="checkbox" name="fishing" value="fishing.png"> 
    </div> 

    <div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="hiking" value="No"> 
    <input type="checkbox" name="hiking" value="hiking.png"> 
    </div> 

    <div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;"> 
    <input type="hidden" name="mobileok" value="No"> 
    <input type="checkbox" name="mobileok" value="mobile.png"> 
    </div> 

    <p align="center"><br> 
</div> 

<div id="form" style="position:absolute; left:14; top:405px; width:760px; height:575px;" class="form2"> 
    <div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span> </p> 
    </div> 
    <p align="center"> <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea> 
    <br> 
    </p> 
    <p align="center" class="headers">Location of the Free Campsite</p> 
    <p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p> 
    <div align="center"><br align="center" class="text"> 
     <span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br> 
    </div> 
    <div class="text" id="infoPanel"> 
    <div align="center"><b>Marker status:</b> 
    </div> 
    <div align="center" id="markerStatus"> 
     <div align="center"><i>Click and drag the marker.</i></div> 
    </div> 
    <div align="center"><b>Closest matching address:</b> 
    </div> 
    <div align="center" id="address"></div> 
    </div> 

      <p align="center"><span class="text">Latitude:</span> 
       <input size="20" type="text" align="center" id="info" name="lat" /><br> 
      <br> 
      <span class="text">Longitude:</span>   
      <input size="20" type="text" align="center" id="info2" name="lng"/><br> 
      <br> 

       <span class="text">Tick this box to prove you're human</span> 
       <input type="checkbox" name="human" value="1"> 
       <br> 
       <br> 

      <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> 
       <input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/> 
     </p> 
</div> 


    <div id="panel" style="position:absolute; left:14; top:1010px; width:760px; height:20px;"> 
     <input id="address2" type="textbox" value="Sydney, NSW"> 
     <input type="button" value="Geocode" onclick="codeAddress()"> 
    </div> 


</div> 
</div> 
</div> 
</body> 
</html>

Если у кого-нибудь есть предложения?

Бест, Дарко

источник

2013-06-14 Darko J

И каков ваш вопрос? – PiLHA

Привет, я не знаю, почему отображение маркера для простого геокодирования по текстовому поле внутри моей карты не работает, я не могу найти причину. –

Попробуйте сделать простой пример, который удаляет все, кроме геокодирования, заставляет эту работу возвращать другой материал. Или сделайте jsfiddle, который показывает проблему. – geocodezip

У вас есть по крайней мере две проблемы:

переменная карта является локальной для вашей функции нагрузки, он не доступен в глобальной области, где функции обработки HTML нажмите (т.е. геокодер).
```
var map=null; 

function load() { 
// ... 
map = new google.maps.Map(document.getElementById("map"), { 
    center: latLng, 
    zoom: 4, 
    mapTypeControlOptions: { 
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
    } 
}); 
```

нет недвижимости "address2" из google.maps.GeocoderRequest, который должен быть "адрес"

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

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

источник

2013-06-14 13:30:17 geocodezip

API Google Maps - две службы геокодирования внутри одной карты

ответ

Смежные вопросы