Make geocoding map zoom on scroll -
i looking @ 2 different geocode examples found , looking best of both features. have not had experience geocoding , find google docs hard follow
this 1 want except scroll in when user uses mouse wheel. http://jsfiddle.net/ep7rr/
i 1 if marker move user drags map in first one.http://jsfiddle.net/ajetc/
i know there different ways such new gmap2 , new google.maps.geocoder
the first 1 works code
<script> function load() { if (gbrowseriscompatible()){ var map = new gmap2(document.getelementbyid("map")); map.addcontrol(new gsmallmapcontrol()); map.addcontrol(new gmaptypecontrol()); var center = new glatlng(54.18173, -6.35284); map.setcenter(center, 15); geocoder = new gclientgeocoder(); var marker = new gmarker(center, {draggable: true}); map.addoverlay(marker); document.getelementbyid("lat").innerhtml = center.lat().tofixed(5); document.getelementbyid("lng").innerhtml = center.lng().tofixed(5); gevent.addlistener(marker, "dragend", function(){ var point = marker.getpoint(); map.panto(point); document.getelementbyid("lat").innerhtml = point.lat().tofixed(5); document.getelementbyid("lng").innerhtml = point.lng().tofixed(5); }); /*end gevent.addlistener(marker, "dragend", function(){*/ gevent.addlistener(map, "moveend", function() { map.clearoverlays(); var center = map.getcenter(); var marker = new gmarker(center, {draggable: true}); map.addoverlay(marker); document.getelementbyid("lat").innerhtml = center.lat().tofixed(5); document.getelementbyid("lng").innerhtml = center.lng().tofixed(5); gevent.addlistener(marker, "dragend", function() { var point =marker.getpoint(); map.panto(point); document.getelementbyid("lat").innerhtml = point.lat().tofixed(5); document.getelementbyid("lng").innerhtml = point.lng().tofixed(5); }); /*end gevent.addlistener(marker, "dragend", function() {*/ }); /*end gevent.addlistener(map, "moveend", function() {*/ } /*end if (gbrowseriscompatible()){*/ } /*end function load*/ and second uses this
<script type="text/javascript"> function showaddress() { var map = new gmap2(document.getelementbyid("map")); var address = document.getelementbyid('fulladdress').value; return false; } /*end function showaddress*/ 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 @ location.'); } }); } function updatemarkerstatus(str) { document.getelementbyid('markerstatus').innerhtml = str; } function updatemarkerposition(latlng) { document.getelementbyid('info').innerhtml = [ latlng.lat(), latlng.lng() ].join(', '); } function updatemarkeraddress(str) { document.getelementbyid('address').innerhtml = str; } function initialize() { var latlng = new google.maps.latlng(54.18173, -6.35284); var map = new google.maps.map(document.getelementbyid('mapcanvas'), { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap }); var marker = 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(marker, 'dragstart', function() { updatemarkeraddress('dragging...'); }); google.maps.event.addlistener(marker, 'drag', function() { updatemarkerstatus('dragging...'); updatemarkerposition(marker.getposition()); }); google.maps.event.addlistener(marker, 'dragend', function() { updatemarkerstatus('drag ended'); geocodeposition(marker.getposition()); }); } // onload handler fire off app. google.maps.event.adddomlistener(window, 'load', initialize); </script>
catch event when map dragged. update position of marker getting map center geocode position of marker
google.maps.event.addlistener(map, 'dragend', function() { updatemarkerstatus('drag ended'); marker.setposition(map.getcenter()); geocodeposition(marker.getposition()); }); like : http://jsfiddle.net/zyv9n/
Comments
Post a Comment