My php code.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="ourhousesassets/fonts/font-awesome.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="ourhousesassets/bootstrap/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="ourhousesassets/css/bootstrap-select.min.css" type="text/css">
<link rel="stylesheet" href="ourhousesassets/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="ourhousesassets/css/jquery.nouislider.min.css" type="text/css">
<link rel="stylesheet" href="ourhousesassets/css/style.css" type="text/css">
<title>Our Houses</title>
<style type="text/css">
.link-item
{
color: #000;
}
#nav_top{
color: #000;
}
</style>
</head>
<?php
include 'connection.php';
$sql_1 = "SELECT * FROM house_info";
$result_1 = mysqli_query($conn,$sql_1);
?>
<body id="page-top" background="assets/img/map.jpg" opacity="0.2">
<?php include 'header_ourhouses.php'; ?>
<div id="page-wrapper">
<div class="container" id="main-container">
<div class="page-content">
<div class="content-loader">
<div class="content fade_in animate">
<a href="#" class="close" id="close"><img src="ourhousesassets/img/close.png" alt=""></a>
<!--external content goes here-->
</div>
</div>
<!--end Content Loader-->
<div class="map-wrapper grid">
<div class="map height-500" id="map"></div>
<!--end .map-->
</div>
<div class="masonry grid animate">
<?php
while($row = mysqli_fetch_array($result_1))
{
$x=$row['id'];
$city=$row['city'];
$type=$row['type'];
$location=$row['location'];
$landmark=$row['landmark'];
$gender=$row['gender'];
$address=$row['address'];
//include 'ourhousesassets/totalavailability.php';
/* $sql_2 = "SELECT * FROM furniture WHERE id = $j";
$result_2 = mysqli_query($conn,$sql_2);
$bed;
while($row = mysqli_fetch_array($result_2))
{
$bed=$row['bed'];
}*/
echo "<div class='item'>";
echo "<a href='house_details.php?house_id=$x' data-expand-width='col-9' data-transition-parent='.content-loader' data-external='true'>";
echo "<div class='inner'>";
echo "<div class='image'>";
echo "<div class='price average-color'><span>".$gender."</span><br>Availability: ";
include 'ourhousesassets/totalavailability.php';
echo "</div>";
echo "<img src='ourhousesassets/img/items/$x.jpg'>";
echo "</div>";
echo "<div class='item-content'>";
echo "<header class='average-color'>";
echo "<h2>". $type. "BHK</h2>";
echo "<h3>".$location."</h3>";
echo "</header>";
echo "<footer>";
echo "<dl>";
echo "<dt>Bedrooms</dt>";
echo "<dd><b>".$type."</b></dd>";
echo "<dt>Address</dt>";
echo "<dd><b>".$address."<br>Near ".$landmark."</b></dd>";
echo "<dt>City</dt>";
echo "<dd><b>".$city."</b></dd>";
echo "</dl>";
echo "</footer>";
echo "</div>";
echo "</div>";
echo "</a>";
echo "</div>";
}
?>
</div>
<!--end .grid-->
</div>
<!--end .container-->
</div>
<!--end Page Content-->
</div>
<?php include 'footer.php';?>
<script type="text/javascript" src="ourhousesassets/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="ourhousesassets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/jquery.color-2.1.2.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/jquery.average-color.js"></script>
<script type="text/javascript" src="ourhousesassets/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="ourhousesassets/js/richmarker-compiled.js"></script>
<script type="text/javascript" src="ourhousesassets/js/smoothscroll.js"></script>
<script type="text/javascript" src="ourhousesassets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/bootstrap-select.js"></script>
<script type="text/javascript" src="ourhousesassets/js/icheck.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/jquery.nouislider.all.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/jquery.inview.min.js"></script>
<script type="text/javascript" src="ourhousesassets/js/functions.js"></script>
<script type="text/javascript" src="ourhousesassets/js/custom.js"></script>
<script type="text/javascript" src="ourhousesassets/js/infobox.js"></script>
<script type="text/javascript" src="ourhousesassets/js/markerclusterer.js"></script>
<!--[if lte IE 9]>
<script type="text/javascript" src="assets/js/ie-scripts.js"></script>
<![endif]-->
<!-- Load googe maps from json data -->
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/items.json';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageGoogleMap(_latitude,_longitude,json);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
</body>
</html>
And my json file.
{
"data": [
{
"id": 1,
"title": "2151 Mulberry Avenue",
"location": "63 Birch Street",
"latitude": 51.538395,
"longitude": -0.097418,
"url": "assets/pages/items/1_e.html",
"type": "Apartment",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/1.jpg",
"assets/img/items/2.jpg",
"assets/img/items/3.jpg"
],
"price": "$2500",
"overview":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
},
"description": "Curabitur odio nibh, luctus non pulvinar a, ultricies ac diam. Donec neque massa, viverra interdum eros ut, imperdiet pellentesque mauris. Proin sit amet scelerisque risus. Donec semper semper erat ut mollis. Curabitur suscipit, justo eu dignissim lacinia, ante sapien pharetra duin consectetur eros augue sed ex. Donec a odio rutrum, hendrerit sapien vitae, euismod arcu."
},
{
"id": 2,
"title": "3295 Valley Street",
"location": "Collingswood",
"latitude": 51.541599,
"longitude": -0.112588,
"url": "assets/pages/items/2_e.html",
"type": "House",
"type_icon": "",
"rating": 5,
"price": "$120",
"gallery":
[
"assets/img/items/2.jpg",
"assets/img/items/5.jpg",
"assets/img/items/4.jpg"
],
"overview":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
},
"description": "Curabitur odio nibh, luctus non pulvinar a, ultricies ac diam. Donec neque massa, viverra interdum eros ut, imperdiet pellentesque mauris. Proin sit amet scelerisque risus. Donec semper semper erat ut mollis. Curabitur suscipit, justo eu dignissim lacinia, ante sapien pharetra duin consectetur eros augue sed ex. Donec a odio rutrum, hendrerit sapien vitae, euismod arcu."
},
{
"id": 3,
"title": "534 Roosevelt Street",
"location": "San Francisco",
"latitude": 51.551489,
"longitude": -0.067077,
"url": "assets/pages/items/3_e.html",
"type": "Cottage",
"type_icon": "",
"rating": 5,
"price": "$120",
"gallery":
[
"assets/img/items/3.jpg",
"assets/img/items/5.jpg",
"assets/img/items/4.jpg"
],
"overview":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
},
"description": "Curabitur odio nibh, luctus non pulvinar a, ultricies ac diam. Donec neque massa, viverra interdum eros ut, imperdiet pellentesque mauris. Proin sit amet scelerisque risus. Donec semper semper erat ut mollis. Curabitur suscipit, justo eu dignissim lacinia, ante sapien pharetra duin consectetur eros augue sed ex. Donec a odio rutrum, hendrerit sapien vitae, euismod arcu."
},
{
"id": 4,
"title": "Saguaro Tavern",
"location": "1882 Trainer Avenue",
"latitude": 51.539212,
"longitude": -0.118403,
"url": "assets/pages/items/4_e.html",
"type": "Construction Site",
"type_icon": "",
"rating": 5,
"price": "$120",
"gallery":
[
"assets/img/items/4.jpg",
"assets/img/items/5.jpg",
"assets/img/items/6.jpg"
],
"overview":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
},
"description": "Curabitur odio nibh, luctus non pulvinar a, ultricies ac diam. Donec neque massa, viverra interdum eros ut, imperdiet pellentesque mauris. Proin sit amet scelerisque risus. Donec semper semper erat ut mollis. Curabitur suscipit, justo eu dignissim lacinia, ante sapien pharetra duin consectetur eros augue sed ex. Donec a odio rutrum, hendrerit sapien vitae, euismod arcu."
},
{
"id": 5,
"title": "Max Five Lounge",
"location": "1882 Trainer Avenue",
"latitude": 51.522340,
"longitude": -0.037894,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/5.jpg"
],
"color": ""
},
{
"id": 6,
"title": "Lavadome",
"location": "1882 Trainer Avenue",
"latitude": 51.503965,
"longitude": -0.058837,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 5,
"gallery":
[
"assets/img/items/6.jpg"
],
"color": ""
},
{
"id": 7,
"title": "Café Roosterville Kitchen",
"location": "1882 Trainer Avenue",
"latitude": 51.486758,
"longitude": -0.112739,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/7.jpg"
],
"color": ""
},
{
"id": 8,
"title": "Magma Bar and Grill",
"location": "1882 Trainer Avenue",
"latitude": 51.555385,
"longitude": -0.128274,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"featured": 0,
"gallery":
[
"assets/img/items/2.jpg"
],
"color": ""
},
{
"id": 9,
"title": "Guilt Trattoria",
"location": "1882 Trainer Avenue",
"latitude": 51.560935,
"longitude": -0.111365,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/5.jpg"
],
"color": ""
},
{
"id": 10,
"title": "Hot Dogma",
"location": "1882 Trainer Avenue",
"latitude": 51.530189,
"longitude": -0.078750,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/1.jpg"
],
"color": ""
},
{
"id": 11,
"title": "Roadhouse Cantina",
"location": "1882 Trainer Avenue",
"latitude": 51.543803,
"longitude": -0.036607,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"featured": 0,
"gallery":
[
"assets/img/items/3.jpg"
],
"color": ""
},
{
"id": 12,
"title": "Jetstream",
"location": "1882 Trainer Avenue",
"latitude": 51.518334,
"longitude": -0.125012,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/6.jpg"
],
"color": ""
},
{
"id": 13,
"title": "Benephisto Tavern",
"location": "1882 Trainer Avenue",
"latitude": 51.527306,
"longitude": -0.140977,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/2.jpg"
],
"color": ""
},
{
"id": 14,
"title": "Benephisto Tavern",
"location": "1882 Trainer Avenue",
"latitude": 51.545244,
"longitude": -0.070939,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/5.jpg"
],
"color": ""
},
{
"id": 15,
"title": "Benephisto Tavern",
"location": "1882 Trainer Avenue",
"latitude": 51.558907,
"longitude": -0.041842,
"url": "item-detail.html",
"type": "Restaurant",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/5.jpg"
],
"color": ""
},
{
"id": 16,
"title": "Café Goat and Guru",
"location": "2194 Thrash Trail",
"latitude": 51.551026,
"longitude": -0.102321,
"url": "item-detail.html",
"type": "Restaurant / Grill & Steak",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/4.jpg"
],
"color": ""
},
{
"id": 17,
"title": "Socrates Cantina",
"location": "143 Young Road",
"latitude": 51.550644,
"longitude": -0.103493,
"url": "item-detail.html",
"type": "Restaurant / Grill & Steak",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/8.jpg"
],
"color": ""
},
{
"id": 18,
"title": "Deja Brew Café",
"location": "2469 Hartway Street",
"latitude": 51.532112,
"longitude": -0.051885,
"url": "item-detail.html",
"type": "Restaurant / Coffee",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/8.jpg"
],
"color": ""
},
{
"id": 19,
"title": "Deja Brew Café",
"location": "1087 Massachusetts Avenue",
"latitude": 51.531364,
"longitude": -0.054545,
"url": "item-detail.html",
"type": "Restaurant / Coffee",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/7.jpg"
],
"color": ""
},
{
"id": 20,
"title": "Blue Horizon Grill",
"location": "684 Cambridge Place",
"latitude": 51.531311,
"longitude": -0.052314,
"url": "item-detail.html",
"type": "Restaurant / Grill",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/6.jpg"
],
"color": ""
},
{
"id": 21,
"category": "real_estate",
"title": "Steak House Restaurant666",
"location": "63 Birch Street",
"latitude": 51.530189,
"longitude": -0.078750,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/4.jpg"
],
"item_specific":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
}
},
{
"id": 22,
"category": "real_estate",
"title": "Another same position",
"location": "63 Birch Street",
"latitude": 51.530189,
"longitude": -0.078750,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "",
"rating": 4,
"gallery":
[
"assets/img/items/3.jpg"
],
"item_specific":
{
"bedrooms": 2,
"bathrooms": 1,
"rooms": 3,
"area": 153
}
}
]
When I load the page, it shows a blank area without a trace of the map being loaded. If I create another php file for loading the map and include it it still doesn't work on the site but, works fine for the separate php which contains the map.
Please help!
