On Button click Event pass latitude and longitude CORRESPONDING Place Display on Google Map

Question

i fetch coordinates from Database and displaying corresponding place on Google Map and it's work properly but when i pass coordinates on button click then it's not working.here is my code:

 function load() {


      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(10.5167,7.4333),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
       // click event
       google.maps.event.addListener(map, 'click', function(e) {


    document.getElementById('txtlat').value=e.latLng.lat() ;
    document.getElementById('txtlong').value=e.latLng.lng();

  });
      // Change this depending on the name of your PHP file
      downloadUrl("xmlcustloc.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
           var des = markers[i].getAttribute("des");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>"+des ;
          var icon = customIcons['simple'] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    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() {}

above code is working properly but when i pass coordinates on button click then place is not displaying here is my code on button click :

$(function() { 

 $("#btncheck").click(function() {  
   var lat=document.getElementById('txtlat').value;
   alert(lat);
        var lng=document.getElementById('txtlong').value; 
        alert(lng);
       var point = new google.maps.LatLng(lat,lng);

          var icon = customIcons['search'] || {};
          var marker = new google.maps.Marker({
            map: map,
            id: 'markerShowHide',
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
    }); 
});

I appreciate any help you have to offer. Thank you!

Answer 1

I've built a simple jsFiddle based on your code, but without the Ajax calls.

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(10.5167,7.4333),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListener(map, 'click', function(e) {
        latInput.value = e.latLng.lat() ;
        longInput.value = e.latLng.lng();
    });
}

var latInput = document.getElementById('lat');
var longInput = document.getElementById('long');

function addMarker(){
    var lat = latInput.value;
    var long = longInput.value;

    if(!lat || !long) return;

    var coords = new google.maps.LatLng(lat,long);
    var marker = new google.maps.Marker({
        map: map,
        position: coords
    });
}

google.maps.event.addDomListener(document.getElementById('go'), 'click', addMarker);
google.maps.event.addDomListener(window, 'load', initialize);

jsFiddle