গুগল ম্যাপস এপিআই তে ক্লিক বা টেনে আনার ইভেন্ট থেকে স্থানাঙ্ক প্রাপ্ত হচ্ছে?

আমি একটি গুগল সংস্করণ 3 জিওকোডার তৈরি করেছি, আমি যখন চিহ্নিতকারীটিকে টানা বা ক্লিক করা হয় তখন আমি স্থানাঙ্কগুলি তুলতে সক্ষম হতে চাই। নীচে আমার কোডটি দেওয়া হয়েছে:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}


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

    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
}
</script>

<style type="text/css">
#controls {
position: absolute;
bottom: 1em;
left: 100px;
width: 400px;
z-index: 20000;
padding: 0 0.5em 0.5em 0.5em;
}
 html, body, #map_canvas {
            margin: 0;
            width: 100%;
            height: 100%;
        }
</style>
</head>
<body onload="initialize()">
<div id="controls">
<input id="address" type="textbox" value="Sydney, NSW">

<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>
</body>
</html>

এটি করার জন্য আমি নীচের কোডটি ব্যবহার করার চেষ্টা করেছি তবে এটি কাজ করে বলে মনে হচ্ছে না।

       // Javascript//
       google.maps.event.addListener(marker, 'dragend', function(evt){
       document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
       });

       google.maps.event.addListener(marker, 'dragstart', function(evt){
       document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
       });

 map.setCenter(marker.position);
 marker.setMap(map);

 //HTML//
 <div id='map_canvas'></div>
 <div id="current">Nothing yet...</div>

google-maps-api html

— ব্ল্যাক লোইজাইড
সূত্র

আপনি যা করতে চাইছেন তাতে अस्पष्ट বাছাই করুন তবে কোনও ইভেন্ট হ্যান্ডলার ফাংশনের মধ্যে আপনি evt.latLngস্থানাঙ্কগুলি দখল করতে ব্যবহার করতে পারেন

— রায়

হেই @ রয় আই, আমি একটি ঠিকানা ইনপুট করতে চাইছি তবে আমার উদাহরণের মতো একটি পপআপে স্থানাঙ্কগুলি পান। আমার উদাহরণে আপনি পাঠ্য ইনপুটটির মাধ্যমে কোনও ঠিকানায় যেতে পারেন তারপরে বিন্দুটি টানুন, আমি যখন বিন্দুটি টানব তখন আমি পপআপ স্থানাঙ্ক করতে চাই। নীচের উদাহরণটি ভাল তবে আমি কোনও ঠিকানা ইনপুট করতে চাই? আপনি আমাকে সাহায্য করতে পারেন দয়া করে?

— ব্লেক লোইজাইড

ম্যাপেরজ উদাহরণটি বেশ ভাল দেখাচ্ছে। আমি কিছুক্ষণের জন্য জিএম এপিআই ব্যবহার করি নি, আপনি স্ট্যাকওভারফ্লোতে আরও দ্রুত উত্তর পেতে পারেন।

— রায়

একটি বিশদ ব্লগ: goo.gl/pDD6Q8

— সুরেশ কামরুশি

উত্তর:

আমি আপনার জন্য একটি সাধারণ ফাংশন একসাথে রেখেছি:

function markerCoords(markerobject){
    google.maps.event.addListener(markerobject, 'dragend', function(evt){
        infoWindow.setOptions({
            content: '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'
        });
        infoWindow.open(map, markerobject);
    });

    google.maps.event.addListener(markerobject, 'drag', function(evt){
        console.log("marker is being dragged");
    });     
}

এবং kerোকান মার্কারকর্ডস (মার্কার); চিহ্নিতকরণের আওতায়!

— EZMapdesign
সূত্র

স্থানাঙ্কগুলির সাথে চিহ্নিতকারী এবং জিওকোডার টেনে আনুন

এখানে চিত্র বর্ণনা লিখুন

https://gmaps-samples-v3.googlecode.com/svn-history/r49/trunk/draggable-markers/draggable-markers.html

পুরো কোড:

    <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
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').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

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

function initialize() {
  var latLng = new google.maps.LatLng(-34.397, 150.644);
  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 to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>

  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>
</html>

— ম্যাপের্জ
সূত্র

উপরের লিঙ্কটি আর বৈধ নয় - আপনি অন্য উদাহরণ জানতে পারেন developers.google.com/maps/documentation/javascript/tutorial

— আলভিন