Adding markers to GoogleMaps from database causes Unexpected token o in JSON at position 1


Ask A Question





Login To post a question

I have implemented a web scraper that has scraped details from rugby clubs across the UK, such as place_id , name, address, lat, lng. These are all in mysql database, I then obviously need them to display on my page that has the map on it. I’ve given it a go with my little knowledge of these things, have tried to follow these guides but I had no joy. I am using PDO, to connect to the database to pull those fields from my locations table.

Code:

error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once("connect.php");

$select = "SELECT * FROM locations";
$data = $pdo->query($select);
foreach($data as $key){
$locations[] = array('name' => 'Location Name', 
'address'=>$key['address'], 'lat'=>$key['lat'], 'lng'=>$key['lng']);
}
$markers = json_encode($locations);

 ?>
 <!DOCTYPE html>
 <html lang ="en-US">
 <head>
  <script type="text/javascript">

  <?php
  echo "var markers = $markers;n";
  ?>
 function initMap(){
var kingston = {lat: 51.4123, lng:-0.3007};
var map = new google.maps.Map(
  document.getElementById('map'), {
    center: new google.maps.LatLng(kingston.lat, kingston.lng),
    zoom: 8,
    styles: [
          {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
          {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{color: '#263c3f'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'labels.text.fill',
            stylers: [{color: '#6b9a76'}]
          },
          {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{color: '#38414e'}]
          },
          {
            featureType: 'road',
            elementType: 'geometry.stroke',
            stylers: [{color: '#212a37'}]
          },
          {
            featureType: 'road',
            elementType: 'labels.text.fill',
            stylers: [{color: '#9ca5b3'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [{color: '#746855'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{color: '#1f2835'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'labels.text.fill',
            stylers: [{color: '#f3d19c'}]
          },
          {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{color: '#2f3948'}]
          },
          {
            featureType: 'transit.station',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{color: '#17263c'}]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.fill',
            stylers: [{color: '#515c6d'}]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.stroke',
            stylers: [{color: '#17263c'}]
          }
        ]
      });
var infoWindow = new google.maps.infoWindow(), marker, lat, lng;
var json=JSON.parse(markers);

for(var o in json){
  lat = json[o].lat;
  lng = json[o].lng;
  name= json[o].name;

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    name: name,
    map: map
  });
  google.maps.event.addListener(marker, 'click' function(e)({
    infowindow.setContent(this.name);
    infowindow.open(map, this);
  }.bind(marker));
  }
  }
 </script>
 <script async defer src="https://maps.googleapis.com/maps/api/js? 
key=Omitted=initMap">
 </script>

Unexpected token o in JSON at position 1 is the error thrown/

For more info please click herehttps://stackoverflow.com/q/51846849



Have a question or need a custom quote?
info@smartinfocare.com