How do i connect my Map to PHP Sql Database for Markers


Firstly I have two files database.php and index.php.

I got this working with Google maps and tried the same method on TomTom maps…

My code is as follow: Index.php

require 'database.php';
 // Include the database configuration file 
require_once 'database.php'; 
// Fetch the marker info from the database 
$lng = $db->query("SELECT lng FROM markers"); 
// Fetch the info-window data from the database 
$lat = $db->query("SELECT lat FROM markers"); 


<!DOCTYPE html>
<html class='use-all-space'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>My Map</title>
    <meta name='viewport'
    <!-- Replace version in the URL with desired library version -->
    <link rel='stylesheet' type='text/css' href=''/>
    <div id='map' class='map' style='width:100%; height:100vh'></div>
    <!-- Replace version in the URL with desired library version -->
    <script src=''></script>
      tt.setProductInfo('TrackEVV', '1');{
        key: '<key here>',
        container: 'map',
        style: 'tomtom://vector/1/basic-main'

      var map ={
        key: '<key here>',
        container: 'map',
        style: 'tomtom://vector/1/basic-main',
        center: [73.032100, 19.025432],
        zoom: 15

       var marker = new tt.Marker().setLngLat([$lng, $lat]).addTo(map);
      marker.setPopup(new tt.Popup().setHTML('my marker'));


I am able to load the map but the markers dont show and I get an error on the console that $lng is not defined.

Any ideas on where i am going wrong what needs to be done.

Any pointers are appreciated.


I guess in your code

var marker = new tt.Marker().setLngLat([$lng, $lat]).addTo(map);

you were referring PHP variable directly in java script ?

Maybe changed to

var marker = new tt.Marker().setLngLat([<? echo $lng; ?>, <? echo $lat; ?>]).addTo(map);


Hi, thanks, that helped as in I was able to get the marker… but it is at a random place. It is not picking the value from the databse.

Any ideas

Also only one marker is showing while I have multiple entries in the database.

Any idea why that is happening

Hello Abhisar,

If your code fetches multiple records from the database

  • you should not split the query into two because there is the possibility you get output records in different orders; so it would be best to retrieve data using SELECT lat, lng FROM markers;
  • and you get only one marker displayed because you don’t iterate through the records you received in the output of queries -> you could just loop through the set you have recieved from the database query

Result you get - marker set incorrectly - is a side effect of taking LAT from one query and random LNG from the second one (most probably).

Hope that helps :slight_smile:

1 Like


Thanks for that… it did take me a step forward… The only only issue I am facing is that the JS bit is treating the data as ‘null’. I checked the coords is [0,0] and marker name as null…

Can you paste this part of the code that iterates through points and gives you “null” data?


I got it working. I just had to make an Array loop and it worked fine now. Thanks for you time.