PHP and Javascript google map not functioning together

JonnyDriller · February 26, 2020

I've created both the scripts below. Which seem to work well on their own.

The scripts are not interacting at the moment, however I do intend to use this lil $JSONloc (json encoded variable) from code 1, in Code 2.

But they are not interacting atm.

The Json variable is just a return from a database eg. "New York." and it returns whatever id I give it working fine.

This map script = code 2: Will eventually plot a number of locations. Only 1 is set atm, but I've tested it with more, and it runs fine again on its own.

The problem is when I run both scripts together I get problems.

In this case it echos the location fine but it doesn't load the map.

Ok so remove the echo statement... and then it says Page cannot be displayed

Ok so remove the PHP and the map works fine. Like WTH?

Do these things even work together? I'm at this 1 day and a half. Please help

I've changed the personal details for security.

Code 1

<?php

$ider = $_GET['id'];

$host = "localhost";
$user = "user";
$password ="pass";
$database = "DB1";

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

// connect to mysql database
try{
    $connect = mysqli_connect($host, $user, $password, $database);
} catch (mysqli_sql_exception $ex) {
    echo 'Error';
    
}
$sql = "SELECT id, Location FROM Db1 WHERE id =$ider";
$result = $connect->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $thisloc = $row["Location"]; //get array data
        $JSONloc = json_encode($thisloc); //change to JSON 
        echo $JSONloc; //test
    }
} else {
    echo "0 results";
}
$conn->close();
?>

Code 2

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 90%;
        width: 70%
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      
      var map;
      function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'),
            {center: new google.maps.LatLng(64.009094, -7.316163), zoom: 13});

        var iconBase =
            'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
        var iconBase2 =
              'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/';

        var icons = { // different icons for the map 
          equipment: {
            icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Azure-icon.png'
          },
          library: {
            icon: iconBase2 + 'map-marker-icon.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
        
        var dormant = 'equipment';
        var active = 'library';
        var later = 64.013376;
        var longer = -7.307036; // static variables for testing 
        
        var features = [
          {
            position: new google.maps.LatLng(later, longer),
            type: active
          }
        ];
        
        // Create markers.
        for (var i = 0; i < features.length; i++) {
          var marker = new google.maps.Marker({
            position: features.position,
            icon: icons[features.type].icon,
            map: map
          });
        };
      }
        
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=bla&callback=initMap">
    </script>
  </body>
</html>

Edited February 26, 2020 by JonnyDriller

JonnyDriller · February 26, 2020

I've tried another test where I remove my PHP code.

Gave it php tags

told it to echo "test";

and it loads it and the google map file fine. I might see if I can call this Json var from another file

Edited February 26, 2020 by JonnyDriller

kicken · February 26, 2020

You need to show us the code that isn't working. How exactly did you try and combine them?

JonnyDriller · February 26, 2020

I just combined them as you see it @Kicken. Only all one script, saved as a PHP file. I've gotten a bit further with the troubleshooting.

I've taken just code one and put it on it's own page. Something weird happens

If I have blank <?php?> tags the page displays as a blank white page.

So I put in the script - shown in Code 1.

Now If I use the echo statements - if I echo $thisloc it displays the page with the echo eg. New york

if I echo the $JSONloc it prints again only like this - "New York"

However if I switch off all the echo statements - it says the page cannot be displayed.

All I need is one value matched to the id. This is probably a bad way to do the PHP script. But after a few hours struggling I found this which prints out an array. then I just trimmed it down till I found the variable that I needed.

JonnyDriller · February 26, 2020

I also think this stupid code has fried my database - with the following error...

The phpMyAdmin configuration storage is not completely configured, some
extended features have been deactivated. To find out why click here...sigh....so tired

Sign In

PHP and Javascript google map not functioning together

Recommended Posts

JonnyDriller

Link to comment

Share on other sites

JonnyDriller

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

JonnyDriller

Link to comment

Share on other sites

JonnyDriller

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information