PHP with Javascript, both working code - combined cannot be displayed

Question

I have 2 pieces of working code. This first is slightly convoluted but it brings me back the location I need.

    <?php

    $ider = $_GET['id'];

    $host = "localhost";
    $user = "Meh";
    $password ="pass";
    $database = "MyDB";

    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 MyDB 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"];
        }
    } else {
        echo "0 results";
    }
    $conn->close();
    ?>

Now I want to use this info on a lil google api javascript boyo with multiple markers.

<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(62.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 = {
          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 = 62.013376;
        var longer = -7.307036;

        var features = [
          {
            position: new google.maps.LatLng(62.018596, -7.292223),
            type: dormant
          }, {
            position: new google.maps.LatLng(62.013376, -7.307036),
            type: dormant
          }, {
            position: new google.maps.LatLng(62.009094, -7.316163),
            type: dormant
          }, {
            position: new google.maps.LatLng(62.990540, -7.318134),
            type: dormant
          }, {
            position: new google.maps.LatLng(62.005287, -7.309028),
            type: dormant
          }, {
            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[i].position,
            icon: icons[features[i].type].icon,
            map: map
          });
        };
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> >
    </script>
  </body>
</html>

As you can see i'm not a very sophisticated programmer. More of a junkyard dog. There's a lot going on there - but I'm in the middle of a few changes and I need the info for testing. Both scripts just won't seem to work together, page cannot be displayed. Am I going about this the right way? Any advice would be great.

You probably want to start by putting your JS in its own file, and loading that using a script with src="yourfile.js", too, so you can run JS validation on your JS, and HTML validation on your HTML. Right now, your HTML at the very least has a rogue > in it. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 25, 2020 at 22:33
also fix that SQL query it has potential SQL injection Attacking — Rkv88 - Kanyan
– Rkv88 - Kanyan, Commented Feb 25, 2020 at 22:35
Sorry I see it there near the key. HTML and javascript validation... that's new to me...and load the javascript you say, kind of like you do with Css? @ Mike 'Pomax' Kamermans — Kevin Lynn
– Kevin Lynn, Commented Feb 25, 2020 at 22:37
I'm not overly concerned with security @Rkv88-Kanyan - Kanyan. It's just for a project demo. In and done in half an hour. Do I still need to fix it? — Kevin Lynn
– Kevin Lynn, Commented Feb 25, 2020 at 22:39

Rkv88 - Kanyan · Accepted Answer · 2020-02-25 23:33:22Z

1

if database has Names of places instead of coordination try Using this API instead

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=<?php echo$thisloc;?>&inputtype=textquery&fields=photos,formatted_address,name,geometry&key=YOUR_API_KEY

answered Feb 25, 2020 at 23:33

Rkv88 - Kanyan

1,3222 gold badges9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Lynn · Accepted Answer · 2020-02-27 12:19:29Z

After taking the advice of @Rkv88 - Kanyan and a long day of troubleshooting, I managed to isolate the problem. It was actually the PHP. Weirdly when I echoed a result it would display the output, but with no echo it caused - Page cannot be displayed.

Anyways I just rewrote the PHP script to what I needed. It's probably not the most sophisticated thing in the world. But I only need a specific value every time

<?php

$ider = $_GET['id'];

        $conn = mysqli_connect("localhost", "meh", "pass", "MyDB"); 
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
            }

        $sql = "SELECT Location FROM LifeSaver1 WHERE id =$ider";
        $result = $conn->query($sql);
        $obj = mysqli_fetch_object($result);
        $obj2 = $obj->Location;

?>

Collectives™ on Stack Overflow

PHP with Javascript, both working code - combined cannot be displayed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related