Google Maps will not show with nested Div's? - php

Essentially the code wont show when I provide some sort of page container or any divs around the maps.
Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<?php echo base_url(); ?>body_css.css" type="text/css" />
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php
$url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].
$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].":8888".$_SERVER['REQUEST_URI'];
?>
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php if($url == base_url()): {?>
<title>Welcome to CodeIgniter</title>
<?php } endif; ?>
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php if($url == base_url()."index.php/Welcome/maps"): {?>
<title>Welcome to this site</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.436506, -84.302591);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//////////////////////////////////////////////////////
var latlng2 = new google.maps.LatLng(30.444523, -84.298766);
var myOptions2 = {
zoom: 16,
center: latlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions2);
//////////////////////////////////////////////////////
var latlng3 = new google.maps.LatLng(30.442334, -84.303793);
var myOptions3 = {
zoom: 16,
center: latlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map3 = new google.maps.Map(document.getElementById("map_canvas3"),
myOptions3);
//////////////////////////////////////////////////////
var latlng4 = new google.maps.LatLng(30.440354, -84.301604);
var myOptions4 = {
zoom: 16,
center: latlng4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map4 = new google.maps.Map(document.getElementById("map_canvas4"),
myOptions4);
}
</script>
<?php } endif; ?>
</head>
<body>
<div id="heading">
<h1>Ultimate Campus Services</h1>
<p>
About Us |
Maps
</p>
<hr>
</div>
Main Page
<!--<div id="table_for_maps" >-->
<p>Stadium Student Parking</p>
<p># Spots Available</p>
<div id="map_canvas" style="width:20%; height:20%" ></div>
<p>Zoom</p>
<p>------------------------------<br/></p>
<p>Woodward Faculty Lot</p>
<p># Spots Available</p>
<div id="map_canvas2" style="width:20%; height:20%"></div>
Zoom
<p>------------------------------<br/></p>
<p>GYM LOT</p>
<p># Spots Available</p>
<div id="map_canvas3" style="width:20%; height:20%"></div>
Zoom
<p>------------------------------<br/></p>
<p>GYM LOT</p>
<p># Spots Available</p>
<div id="map_canvas4" style="width:20%; height:20%"></div>
Zoom
<!--</div>-->
Footer
</body>
</html>


I'd hazard a guess that all the map canvas divs have the right width, but 0 height. You need to set a height on a wrapper of the map divs (such as the commented out <div id="table_for_maps" >) or set a non-percent height on the map divs (such as 300px).
You should use a tool like Firebug (Safari and Chrome come with built-in equivalents) to inspect the CSS yourself, to get more information about the problem.


Fixed my issue with API v3. Initial value supplied by Google was:
<div id="map_canvas" style="width:100%; height:100%"></div>
Just change the values to a pixel size such as:
<div id="map_canvas" style="width:850px,;height:600px"></div>

Related

Google maps API get multiple places from API call

I want to call the Google maps API and have it return me a map that has the following.
Centered on the adress I'm giving the API call.
Icons for all nearby supermarkets, schools, fitness and train stations.
I know you can get all supermarkets by typing in "Supermarket" on google maps, but I need to get the supermarkets and more through the API, while being centered on the adress that I'm sending.
I expect the call to look something like this:
http://maps.google.com/?q=teststreet&supermarket&fitness&school&train
Edit:
I've found you can actually do what I wanted here:
https://developers.google.com/places/training/additional-places-features
The only problem is that the URL is returning me a 404, so I'm probably not building it properly.
Am I missing something?
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/place/search/json/js?v=3.exp&sensor=false&types=supermarkt|trein|school|fitness"></script>
<script>
var map;
function initialize() {
var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

use Google map with php and mysql to display locations

i have a map page that include a Google map to display users static locations using the php and mysql because the longitude and lattitude are stored in the database in village table but the village id is in the a foreign key in the user table so i used the INNER join
but the problem is that the browser do not show anything can anyone help me ???
map.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php print "$firstname $lastname"; ?></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
<style type="text/css">
#map {
width: 850px;
height: 500px;
border: 0px;
padding: 0px;
position: absolute;
top: 76px;
left: 253px;
}
</style>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyC9YBiNmZG9jIWY32FzJwn92iuJtJZHjfc&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$query = mysql_query("SELECT lattitude, longiude FROM user u
INER JOIN village v
ON u.village = v.id")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
// $name = $row['user_name'];
$lat = $row['lattitude'];
$lon = $row['longitude'];
//$desc = $row['desc'];
//'<b>$name</b>
echo("addMarker($lat, $lon <br />');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<?php /*require_once('header.php');*/ ?>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="wide-content">
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
<?php /*require_once('footer.php');*/ ?>
</body>
</html>
databse stucture
village table:
id
village_name
district_id
lattitude
longitude
user table:
user_id
first_name
last_name
governorate
district
village
birth_date
email_address
specialization
user_name
password
interest
registered_date
last_log_date

The <br /> in addMarker() function is causing the problem it and the (& ) are redundant.
echo("addMarker($lat, $lon <br />');\n");
Try
echo "addMarker($lat, $lon);\n";

display google map with php and mysql using the longitude and latitude stored in the database is not workingg

I have a map page that include a Google map to display users static locations using the php and mysql because the longitude and lattitude are stored in the database in village table but the village id is in the a foreign key in the user table so I used the INNER join but the problem is that the browser do not show anything.
map.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php print "$firstname $lastname"; ?></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
<style type="text/css">
#map {
width: 850px;
height: 500px;
border: 0px;
padding: 0px;
position: absolute;
top: 76px;
left: 253px;
}
</style>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyC9YBiNmZG9jIWY32FzJwn92iuJtJZHjfc&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$query = mysql_query("SELECT lattitude, longitude FROM user u
INER JOIN village v
ON u.village = v.id")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
// $name = $row['user_name'];
$lat = $row['lattitude'];
$lon = $row['longitude'];
//$desc = $row['desc'];
//'<b>$name</b>
echo("addMarker($lat, $lon <br />');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<?php /*require_once('header.php');*/ ?>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="wide-content">
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
<?php /*require_once('footer.php');*/ ?>
</body>
</html>
database stucture
village table:
id
village_name
district_id
lattitude
longitude
user table:
user_id
first_name
last_name
governorate
district
village
birth_date
email_address
specialization
user_name
password
interest
registered_date
last_log_date
I think the problem is in the query of the INNER JOIN.

Your select query is very limiting. You have only selected two fields in the two tables and the two fields you are trying to join on have been left out of your selection. Try using select * from both the tables and rectify the typos and you will be good to go

If i look at your query there is a typo:
SELECT lattitude, longiude FROM user u
INER JOIN village v
ON u.village = v.id
This:
longiude => longitude

How to reload a page in jquerymobile?

In My Project I am having some javascript to implement my work, but it is not taking when I am starting the page,but it is working after reloading the page.
Here is the code:
<?php
require_once"session.php";
$slat =$_GET['slat'];
$slang =$_GET['slang'];
$elat =$_GET['elat'];
$elang =$_GET['elang'];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once"header.php";?>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Near My Location Contacts</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* function refreshPage() {
alert('dfg');
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
}
refreshPage();*/
//<![CDATA[
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
//var haight = new google.maps.LatLng(37.7699298, -122.4469157);
//var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var haight = new google.maps.LatLng(<?php echo $slat;?>,<?php echo $slang;?>);
var oceanBeach = new google.maps.LatLng(<?php echo $elat;?>,<?php echo $elang;?>);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var request = {
origin:haight,
destination:oceanBeach,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();calcRoute()">
<div data-role=page id=nmContacts >
<div data-role=header data-theme="e" >
Back</font>
<h1 align="left"><font size="2px">Near My Contacts</font></h1>
</div>
<div data-role=content style="width:100%;height:100%;">
<div data-role=content id="map_canvas" style="width:95%; height:300px"></div>
<div id="directionsPanel" style="width:97%;height 100%"></div>
</div>
</body>
</html>
In the above I am having body onload it is not working at the first time after refreshing only it is working.

Here is the answer:
Before You are calling to this page You have to specify in href like the following
assume that you are having the following link to load:
sample
here `href="external" You have to specify otherwise it wont work.....

Why doesn't this Canvas show up?

Can anyone tell me why this canvas won't show up? I just don't get it, it doesn't even display the tag. I'm on crunchbang 10 using chromium. All other canvases work, but this one doesn't.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>

The problem is a syntax error in your JavaScript code. You're missing a ); on the closing } of the main function
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});

There's an error in your JavaScript syntax:
}) // you are missing this parenthesis
</script>
Other than that the canvas absolutely shows up. Add:
<canvas id="canvas" width="800px" height="100px" style="border: 1px solid black">
To see a border around it.
Example:
http://jsfiddle.net/RmVs4/8/

Categories