javascript - Displaying marker with latlong json data in Biostall-google-maps-V3 API Library issue

Question

i have a simple AJAX that will get all data from MYSQL with my controller then display all data with its latitude and longitude when searched:

$(document).ready(function () {
    $("#searchDataToMarker").keyup(function () {
        var value = $(this).val();
        $.ajax({
            type: "POST",
            url: "<?php echo base_url('Maps/mapSearchDataInMarker') ?>",
            data: {
                'searchDataToMarker': value
            },
            dataType: "JSON",
            success: function (searchMapDataResult) {
                if (searchMapDataResult.length !== null || $('searchDataToMarker').value !== '' || searchMapDataResult['latlong'] !== '') {
                    //we need to check if the value is the same
                    $("#searchResult").html(searchMapDataResult['lname']);
                    console.log(searchMapDataResult['lname']);
                    console.log(searchMapDataResult['latlong']);
                    var latlong = parseFloat(searchMapDataResult['latlong']);
                    var myLatLong = new google.maps.LatLng(7.289600,125.678066);
                    var iw = new google.maps.InfoWindow();
                    var myOptions = {
                        zoom: 15,
                        center: myLatLong,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    },
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                    var markerOptions = {
                        map: map,
                        position: myLatLong
                    };
                    marker = new google.maps.Marker(markerOptions);
                    //for (var i = 0, length = searchMapDataResult.length; i < length; i++) {
                    google.maps.event.addListener(marker, "click", function () {
                        iw.setContent(searchMapDataResult['lname']);
                        iw.open(map, marker);
                    });
                //}
                } else {
                    $("#searchResult").html('');
                    alertify.alert('Search result empty.').set('modal', false);
                    return;
                }
            }
        });
    });
});

and my controller:

class Maps extends CI_Controller() {
    public function __construct() {
    parent::__construct();
    $this->load->Model('Login_model');
    $this->load->Model('Maps_model');
}

public function mapSearchDataInMarker() {
    if (isset($_POST['searchDataToMarker'])) {
        $searchData = $_POST['searchDataToMarker'];
        $query = $this->db->query("SELECT * FROM resident WHERE name LIKE '%{$searchData}%' OR mname LIKE '%{$searchData}%' OR lname LIKE '%{$searchData}%' OR gender LIKE '%{$searchData}%' OR bday LIKE '%{$searchData}%' OR age LIKE '%{$searchData}%' OR citizenship LIKE '%{$searchData}%' OR occupation LIKE '%{$searchData}%' OR status LIKE '%{$searchData}%' OR purok LIKE '%{$searchData}%' OR resAddress LIKE '%{$searchData}%' OR perAddress LIKE '%{$searchData}%' OR email LIKE '%{$searchData}%' OR telNum LIKE '%{$searchData}%' OR cpNum LIKE '%{$searchData}%'");
        foreach ($query->result() as $searchResult) {
            echo json_encode($searchResult);
        }
    } else {
        echo '';
    }
}
}

all of this totally works. But I want to display this data with marker in its designated location (using data's latitude and longitude).

My problem is, when I change the var myLatLong = new google.maps.LatLng(7.289600, 125.678066); in the script with this: var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong']); where that value is from the data's latitude and longitude, it doesn't show marker nor the map. It display a gray panel with its controllers.

And I am confuse why does it display a marker with this var myLatLong = new google.maps.LatLng(7.289600,125.678066) but it doesn't display with this var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong']) where the value of searchMapDataResult['latlong'] are totally the same?

Answer 1

The problem is google.maps.LatLng is expecting two numbers and you are passing it a string from your database (assuming searchMapDataResult['latlong'] is returning a comma delimited string). So you will need to

1. Split the latitude and longitude
2. Convert them into numbers
3. Generate the google.maps.LatLng

Like this:

var latLngArray = searchMapDataResult['latlong'].split(',');
var latitude = parseFloat(latLngArray[0]);
var longitude = parseFloat(latLngArray[1]);
var myLatLong = new google.maps.LatLng(latitude,longitude );