maps only show gray with certain latt and long grabbed from database

Question

I'm working with Googlemaps now. I use lattitude and longitude stored in the database. To call the data, I use simple ajax and it shows the latt and long as I wish. However, It takes a long time to show the map based on the latt and long. Otherwise, It does not show anything. I don't know. How can I handle this?

Updated:

It looks there's a problem with the event.key onkeypress. I tried clean code for that and it doesn't show anything !. ex: jsfiddle But That keyboard works on other code.

Here's the complete code:

JS/Ajax call the database through file inc.php:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
        function strQuery(str) {
             if (str.length == 0) {
                 document.getElementById("valdata").value = "-33.8474, 151.2631";
                 return;
                 } 
             else{
                 var xmlhttp = new XMLHttpRequest();
                 xmlhttp.onreadystatechange = function() {
                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("valdata").value = xmlhttp.responseText;
                        script_dkill()
                     }
                 }
                 xmlhttp.open("POST", "inc.php?q="+str, true);
                 xmlhttp.send(null);
             }
        }
        //start: calling maps
        var map;
        var strlng;
        function script_dkill() {
            strlng = document.querySelector("#valdata").value;
            if (strlng) {
                var latlng = new google.maps.LatLng(strlng);
                var myOptions = {
                    zoom: 12,
                    center: latlng,
                    panControl: true,
                    zoomControl: true,
                    scaleControl: true,
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            addMarker(new google.maps.LatLng(strlng), map); 
            }
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>

Here's the target(Output) in HTML:

    <input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..." value="" type="text" onKeyPress="strQuery(this.value)"/>
    <input id="valdata" name="valdata" type="text"/>

<div id="map_canvas" style="width:99.8%; height:280px; margin:0px; padding:0px;"></div>

and, here's the PDO the way I grab the data of latt and long (inc.php):

<?php
include('deep/cf/dbbs.php');
error_reporting(E_ALL);
?>
<?php
if(isset($_GET['q'])) {
    $q = $_GET['q'];
    }
$q = isset($_GET['q']) ? $_GET['q'] : '';
$nsUser="SELECT * FROM cliententry WHERE kampusterdekat=:q";
$uQuery = $mydb->prepare ($nsUser);
$uQuery->execute(array(':q' => $q));
$result = $uQuery->fetch(PDO::FETCH_ASSOC);
if ($result>0){
    $googlemap=$result['googlemap'];
    echo $googlemap;
    }
else{
    echo "<script>alert('Rent-house not registered yet');</script>";
    }
?>

It's impossible to give you how the code running here. if you don't mind, please check here: TEST-REAL-PAGE

Use keyword: "Universitas Lampung" since it's already inside the db.

Answer 1

I tends to focus on how the events work which I found it was wrong. Data from db is interpreted as one value, ex: -2.9549663, 104.6929232 I must convert it into array first before called by JS in googlemap.

So, what makes it gray? It is because it didn't find the correct data format (like: -2.9549663, 104.6929232) in array. That's stupid of me.

Here's the way I convert which makes me stupid in a week:

var strlng = document.querySelector("#valdata").value;
var test1 = strlng.split(',');
var x = test1 [0];
var y = test1 [1];

After that, insert the x and y into the value of latt and long (latt and long is in array value), as follow:

var map;
        function script_dkill() {
            var strlng = document.querySelector("#valdata").value;
var test1 = strlng.split(',');
var x = test1 [0];
var y = test1 [1];
            var latlng = new google.maps.LatLng(x,y);
            var myOptions = {
                zoom: 12,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            addMarker(new google.maps.LatLng(x,y), map); 
            }
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            return marker;

everything finally goes so amazing! Done. now I learn one more from JS.