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

Hi,

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

<?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'>
  <head>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>My Map</title>
    <meta name='viewport'
          content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <!-- Replace version in the URL with desired library version -->
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.51.0/maps/maps.css'/>
  </head>
  <body>
    <div id='map' class='map' style='width:100%; height:100vh'></div>
    <!-- Replace version in the URL with desired library version -->
    <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.51.0/maps/maps-web.min.js'></script>
    <script>
      tt.setProductInfo('TrackEVV', '1');
      tt.map({
        key: '<key here>',
        container: 'map',
        style: 'tomtom://vector/1/basic-main'
      });


      var map = tt.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'));
    



    </script>
  </body>
</html>

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.

Thanks
Abhisar

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);

instead?

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

Hi,

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?

Hi,

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