I’m having a puzzling little problem with the Google Maps API which has had me tearing my hair out. The following code
<?php
$anim='images/animation.gif';
session_start();
if ($_SESSION['anim']==1) {
$anim='images/transparent.png';
}
//Select database
require_once('../Connections/MySQL_extranet.php');
mysql_select_db($database_MySQL_extranet, $MySQL_extranet);
// Get the hid which is passed from previous page
if (isset($_REQUEST['hid'])) {
$hid=$_REQUEST['hid'];
}
//MySQL query to select location details
$query_location = "SELECT hotel, lat, lng, zoomair, sp_lat, sp_lng FROM ex_hotel WHERE hid = '$hid'";
$location = mysql_query($query_location, $MySQL_extranet) or die(mysql_error());
$row_location = mysql_fetch_assoc($location);
//Set the session variable to pass the hotel name
$_SESSION['hotel'] = $row_location['hotel'];
?>
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!--> <html> <!--<![endif]-->
<!--Dump the above when IE7 users go below 2% -->
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Little Hotels - Directions to <?php echo $row_location['hotel'];?></title>
<meta name="description" content="Little Hotels provides accurate directions to hotels from any starting point you choose.">
<meta name="keywords" content="hotel directions, google maps, Little Hotels, driving directions, directions to <?php echo $row_location['hotel'];?>">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
<?php
$full_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$canonical_url = strtok($full_url,'?');
echo '<link rel="canonical" href="' . $canonical_url . '" >';
?>
<link rel="stylesheet" href="css/littlehotels.css" type="text/css">
<style type="text/css">
#content{padding: 70px 5px 0; width: 100%;}
#mapcontainer{float:left; display:block;}
#mapCanvas {width: 600px; height: 400px;}
#markerStatus {height: 0px;}
#info {height: 0px;}
#infoPanel {margin-left: 620px; margin-right:10px; display:block;}
#infoPanel div {margin-bottom: 5px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var lat = <?php echo $row_location['lat'];?>;
var lng = <?php echo $row_location['lng'];?>;
var latlng = new google.maps.LatLng(lat, lng);
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(startpoint) {
document.getElementById('info').innerHTML = [
startpoint.lat(),
startpoint.lng()
].join(', ');
}
function nextPage() {
saddress = document.getElementById('info').innerHTML;
location='directions_detail.php?saddr='+saddress+'&daddr='+latlng;
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var zoom = <?php echo $row_location['zoomair'];?>;
var sp_lat = <?php echo $row_location['sp_lat'];?>;
var sp_lng = <?php echo $row_location['sp_lng'];?>;
var startpoint = new google.maps.LatLng(sp_lat, sp_lng);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var destimage = new google.maps.MarkerImage('/images/hotel_icon.gif',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
var destshadow = new google.maps.MarkerImage('/images/hotelshadow.png',
new google.maps.Size(51, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
var marker = new google.maps.Marker({
icon: destimage,
shadow: destshadow,
map: map,
position: latlng
});
var startimage = new google.maps.MarkerImage(
'/images/start_icon.png',
new google.maps.Size(59, 37),
new google.maps.Point(0,0),
new google.maps.Point(29, 35));
var marker = new google.maps.Marker({
position: startpoint,
title: 'If necessary, drag this to a different start point',
map: map,
draggable: true,
icon: startimage
});
// Update current position info.
updateMarkerPosition(startpoint);
geocodePosition(startpoint);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="wrapper">
<a href="http://www.littlehotels.co.uk"><img src="images/transparent.png" width="266" height="122" border="0" alt="Little Hotels"></a>
<img src="<?php echo $anim ?>" alt="Little Hotels logo" width="93" height="117" align="top">
<img src="images/header/directions.png" alt="Little Hotels" width="364" height="88">
<div id="container">
<?php include("includes/topnavbar.html"); ?>
<div id="breadcrumb">
<div class="bc-link" style="width:200px"><a href="../carhire.php" target="_blank">Car Hire at competitive rates</a></div>
<div class="bc-link"><a href="flights.php" target="_blank">Flights</a></div>
<div class="bc-link"><a href="ferries.php" target="_blank">Ferries</a></div>
<div class="bc-link"><a href="airportparking.php" target="_blank">Airport Parking</a></div>
<div class="bc-link"><a href="airporthotels.php" target="_blank">Airport Hotels</a></div>
<div class="bc-link" style="width:200px"><a href="travelinsurance.php" target="_blank">Travel Insurance</a></div>
<div class="bc-link" style="width:200px" align="right"><a href="wp/" target="_blank">News and Special Offers</a></div>
</div>
<div id="content">
<div id="mapcontainer">
<table border=1 bordercolor="#666666">
<tr>
<td>
<div id="mapCanvas"></div>
</td>
</tr>
</table>
</div>
<div id="infoPanel">
<h2>Driving Directions to <?php echo $row_location['hotel'];?> </h2>
<!-- Following two lines must be kept in, even though not visible. Also corresponding lines in Style -->
<div id="markerStatus" style="visibility:hidden;"><i>Click and drag the marker.</i></div>
<div id="info" style="visibility:hidden;"></div>
<b>Start Point:</b>
<div id="address"></div>
<br><b>Destination:</b><br>
<div><?php echo $row_location['hotel'];?></div>
<br>
To select a different starting point, just drag the start icon to the required location (zoom in if necessary for better precision).<br>
<br>
<button onclick="nextPage()">Get Directions</button>
<br>
<span class="verdana"><br>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
$_SESSION['anim']=1;
?>
creates a satisfactory page (http://new.littlehotels.co.uk/directions_hotel.php?hid=colorado) but I want to add a couple of refinements. These changes need me to create a javascript variable from a piece of MySQL data.
Therefore I want to create a line something like this:
var hotelname = <?php echo $row_location['hotel'];?>;
That shouldn’t be too hard as I already have several similar lines in the working code. However, this new line breaks the page every time, no matter what variations I try. When I add that line in, the page displays but without the map and without the name of the Start Point on the righthand side.
Is it me?????????????
I am guessing you are outputting a string from
$row_location['hotel']in that case you need to wrap in quotes to tell javascript its not a variable but a string value.thus:
To check if the above hypothesis is true check your console and you will see the following error: