Jump to content
Sign in to follow this  
JonnyDriller

PHP and Javascript google map not functioning together

Recommended Posts

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 by JonnyDriller

Share this post


Link to post
Share on other sites

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 by JonnyDriller

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.