Googlemap Javascript错误

时间：2016-07-01 14:42:05

标签： javascript maps

我得到'哎呀！尝试运行此Googlemap时出现“错误”消息。当我单独开发它时，地图代码工作正常（参见下面的'mymap.php'文件），但只有在我将它集成到我的html模板中之后才发生这种情况。我已经尝试过移动它并在head标签内外运行javascript但它似乎没有什么区别。 我认为它可能是API密钥的一个问题，但看到它在'mymap.php'文件中工作正常，我认为不一定是这样。 可能是因为我已经放置了Javascript来创建头标记的地图吗？或者Bootstrap标头是否可能以某种方式干扰？

mymap.php（工作正常）：

<!DOCTYPE html>
<?php
include("includes/db.php");
include("functions/functions.php");

// Create connection
$conn = new mysqli("localhost","root","","lstest1");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
?>

<?php

if (isset ($_GET['loc_value'])) {
    $locations = array(); // empty array to store location information
    $county = $_GET['loc_value']; // which county are we going to map
    $get_county = "select * from locations where county='$county'";
    $result = $conn->query($get_county);
    while ($row_locations = mysqli_fetch_assoc($result)){
        $loc_name = $row_locations['loc_name'];
        $latitude = $row_locations['latitude'];
        $longitude = $row_locations['longitude'];
        $description = $row_locations['loc_desc'];

        $newLocation = array ("title" => $loc_name, "lat" => $latitude, "lng" => $longitude, "description" => $description);
        array_push($locations, $newLocation);
    }//while
}//if
//print_r($locations);
?>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var locations = <?php echo json_encode($locations, JSON_PRETTY_PRINT); ?>;


window.onload = function() {
        LoadMap();
    }

function LoadMap() {
      var mapOptions = {
        center: new google.maps.LatLng(54.6990782, -6.6171596),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var infoWindow = new google.maps.InfoWindow();
      var latlngbounds = new google.maps.LatLngBounds();
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);


     for (var i = 0; i < locations.length; i++) {
            var data = locations[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
        }
}//loadmap
</script>


<div class="map-responsive" id="map" style="width: 600px; height: 500px;"></div>

这是放在我正在使用的Bootstrap模板中 - filename' countymap.php'：

<!DOCTYPE html>
<?php
include("includes/db.php");
include("functions/functions.php");

// Create connection
$conn = new mysqli("localhost","root","","lstest1");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
?>

<?php

if (isset ($_GET['loc_value'])) {
    $locations = array(); // empty array to store location information
    $county = $_GET['loc_value']; // which county are we going to map
    $get_county = "select * from locations where county='$county'";
    $result = $conn->query($get_county);
    while ($row_locations = mysqli_fetch_assoc($result)){
        $loc_name = $row_locations['loc_name'];
        $latitude = $row_locations['latitude'];
        $longitude = $row_locations['longitude'];
        $description = $row_locations['loc_desc'];

        $newLocation = array ("title" => $loc_name, "lat" => $latitude, "lng" => $longitude, "description" => $description);
        array_push($locations, $newLocation);
    }//while
}//if
//print_r($locations);
?>


<html lang="en">

    <!-- Arvo font for webpage & font-awesome-->
    <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Stoke' rel='stylesheet' type='text/css'>


<head>
  <title>Location Scout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


 <!-- Custom styles for this template -->
    <link href="styles/location.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Map</title>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var locations = <?php echo json_encode($locations, JSON_PRETTY_PRINT); ?>;


window.onload = function() {
        LoadMap();
    }

function LoadMap() {
      var mapOptions = {
        center: new google.maps.LatLng(54.6990782, -6.6171596),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var infoWindow = new google.maps.InfoWindow();
      var latlngbounds = new google.maps.LatLngBounds();
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);


     for (var i = 0; i < locations.length; i++) {
            var data = locations[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
        }
}//loadmap
</script>

</head>

<body>


<div class="container-fluid text-center">

<!-- MAIN HEADING AREA -->
    <div class="row">
        <div class="col-md-12">
            <h1>
                LOCATION SCOUT
            </h1>

        </div>
    </div>

    <!-- MAIN ACTIVITY WINDOW -->

    <div class="row">
        <div class="col-md-9">

        <div class="map-responsive" id="map" ;"></div>

        </div>


        <!-- SIDEBAR/MENU AREA -->

        <div class="col-md-3">

        <div class="btn-group-vertical">
<a href="index.php" class="btn btn-info" role="button">Homepage</a>
<a href="user_home.php?user" class="btn btn-success" role="button">User Page</a>

</div>

        <div class="container">
    <div class="row">

           <div class="form col-md-3">
                            <form method="get" action="results.php">
                                <input type="text" name="user_query" placeholder="Search for location"/>

                              <input type="submit" name="search" value="search"/>

                                </form>
                            </div>
    </div>
</div>


            <h2>Welcome!</h2>

            <p>
                This is your one-stop shop to plan your visit to some of Northern Ireland's most fascinating movie and Tv locations.
                Start your search on the menus below or use the search box above to get plotting!
            </p>

            <h2>Start your search:</h2>

            <div class="btn-group">

            <button type="button" class="btn btn-warning">By County</button>
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                    <li>
                <a href="getCounty.php?county=Antrim">Antrim</a>
                    </li>
                    <li>
                        <a href="getCounty.php?county=Armagh">Armagh</a>
                    </li>
                    <li>
                        <a href="getCounty.php?county=Down">Down</a>
                    </li>
                    <li>
                        <a href="getCounty.php?county=Fermanagh">Fermanagh</a>
                    </li>
                    <li>
                        <a href="getCounty.php?county=Londonderry">Londonderry</a>
                    </li>
                    <li>
                        <a href="getCounty.php?county=Tyrone">Tyrone</a>
                    </li>
                </ul>
            </div><br>
            <div><br></div>
            <div class="btn-group">

                <button type="button" class="btn btn-warning">By Genre</button>
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="getGenre.php?genre=Drama">Drama</a>
                    </li>
                    <li>
                        <a href="getGenre.php?genre=Thriller">Thriller</a>
                </li>
                    <li>
                        <a href="getGenre.php?genre=Documentary">Documentary</a>
                    </li>
                    <li>
                        <a href="getGenre.php?genre=Horror">Horror</a>
                    </li>
                    <li>
                        <a href="getGenre.php?genre=Sci-fi">Sci-fi</a>
                    </li>
                    <li>
                        <a href="getGenre.php?genre=Children">Children</a>
                    </li>
                    <li>
                        <a href="getGenre.php?genre=Fantasy">Fantasy</a>
                    </li>
                </ul>
            </div><br>
            <div><br></div>
            <div class="btn-group">

                <button type="button" class="btn btn-warning">By Production</button>
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="getProduction.php?production=Game of Thrones">Game of Thrones</a>
                    </li>
                    <li>
                        <a href="getProduction.php?production=Line of Duty">Line of Duty</a>
                    </li>
                    <li>
                        <a href="getProduction.php?production=The Fall">The Fall</a>
                    </li>
                </ul>
            </div><br>
            <div><br></div>

            <div class="btn-group">

            <a href="login.php?login" class="btn btn-success" role="button">Login</a>
            <a href="registration.php?registration" class="btn btn-info" role="button">Register</a>
            </div><br>
            <br><div class="btn-group">
            <a href="Admin_area/index.php" class="btn btn-danger" role="button">Admin</a>
                    </div>

        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题