I tried to use PHP and MySQL to show multiple markers on Google Maps. The code below uses PHP to connect to the database so as to get the latitude and longitude.
The problem is the map doesn't show, but once I delete this line, it works without getting the markers: "var liste_des_points=[<?php echo $listeDesPoints; ?>];". I think the problem is the PHP format.
Please help me with this .
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("survey",$connexion) or die(mysql_error());
$result = mysql_query("SELECT latitude, longitude FROM appreciation order by id");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['latitude'].','.$row['longitude'].']';
}
mysql_close($connexion);
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB3is760vHXhki9vS_LpiWAig8a33GP3CY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var optionsCarte = {
center: new google.maps.LatLng(34.02,-6.83),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
optionsCarte);
var liste_des_points=[<?php echo $listeDesPoints; ? >];
var i=0,li=liste_des_points.length;
while(i<li){
new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][0], liste_des_points[i][1]),
map: map,
});
i++;
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"> </div>
</body>
</html>
Related
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I have a google map embeded in my website and I have followed all the steps in the google website but I have not got to make the map to appear in the browser. Can anyone tell me what I is wrong in the code given below
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>Map Page</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: 3px solid #FF0000;
padding: 0px;
position: absolute;
top: 250px;
left: 253px;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLM6vAtHLu_SgqOtrAZvLSBoQUfILmPLI&sensor=false">
</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, user_name,village_name, longitude FROM user u
INNER 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>
var_dump($query);
echo("addMarker($lat, $lon <br />');\n");
}
echo "this is not working";
?>
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>
You need to be careful with what you write as debug information in your script. The printouts in the middle of the JS code are probably what are breaking your code.
Check with a JS console (like chrome's, or firebug) and you will find those errors there.
Try with this:
while($row = mysql_fetch_array($query))
{
$name = $row['user_name'];
$lat = $row['lattitude'];
$lon = $row['longitude'];
echo("addMarker('$lat', '$lon');\n");
}
?>
I've figured out how to use a jQuery drag-drop sortable ui. I've also figured out how to populate the jQuery list with time data from my table. But... I'm up against another brick wall.
Following is the script for test.php
<?php
session_start();
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/include/db_connect.php';
$date1 = "10/01/2012";
echo $date1;
// strtotime() will convert nearly any date format into a timestamp which can be used to build a date with the date() function.
$timestamp = strtotime($date1);
$start_date = date("Y-m-d", $timestamp);
$result="SELECT DATE_FORMAT(List_Dates.DB_Date, '%m/%d/%Y') as newdate, DATE_FORMAT(List_Time.TFM_Time,'%h:%i %p') as newtime
FROM List_Dates, List_Time
WHERE DATE(DATE_FORMAT(List_Dates.DB_Date,'%Y-%m-%d')) LIKE '" . $start_date . "%'
ORDER BY List_Time.TFM_Time";
$answer = mysql_query($result);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" type="text/css" href="../schedule/include/formats.css"/>
<link rel="stylesheet" href="../jquery/themes/custom-theme/jquery.ui.all.css">
<script src="../jquery/jquery-1.7.1.js"></script>
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.mouse.js"></script>
<script src="../jquery/ui/jquery.ui.sortable.js"></script>
<script src="../jquery/ui/jquery.ui.selectable.js"></script>
<style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<div>
<ul name="timelist" id="sortable1" class="connectedSortable">
<?php
while($row = mysql_fetch_array($answer))
{
echo "<li class='ui-state-default'>". $row['newtime'] ."</li>";
}
?>
</ul>
<ul name="blocklist" id="sortable2" class="connectedSortable">
<li id="blocked" type="date" class="ui-state-highlight"></li>
</ul>
</div>
</body>
</html>
As I mentioned earlier, the script is successfully populating a sortable drag-drop list with times from my database. I can drag and drop one time from the left side timelist to the right side blocklist. Now I need to extract an array from the blocklist. I found the following:
<script>
$('ul#myList li').each(function(){
var number = $(this).find('span:first-child').text();
var fruit = $(this).find('span:first-last').text();
});
</script>
For my application it makes sense to change the syntax as follows:
<script>
$('ul#sortable2 li').each(function(){
var btime = $(this).find('span:first-child').text();
});
</script>
But... I can't figure out how to successfully use it and echo the results. Everything I've tried results in failure. Any advice is welcome.
Check the jQuery UI documentation there is a method called toArray which you can call on your sortable element to get, well, an array.
http://jqueryui.com/demos/sortable/#method-toArray
Basically I'm having a problem with getting google maps to tag addresses that are in my database, when I use php to do:
print codeAddress("example address");
it works fine, however, when I set it up as I have it here it doesn't even display the map, can anybody here help me with this issue?
Thanks,
Wakeeta
<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAWiB6PqOyqsJJZLmoZ5CFb2IP6sqqhtI8&sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
$dbh=mysql_connect('webdb.uvm.edu','swakita','PASSWORD');
if (!$dbh)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('SWAKITA', $dbh);
$addressprint = mysql_query("SELECT fldStreet FROM tblLocation");
while ($row = mysql_fetch_row($addressprint)) {
foreach ($row as $field) {
print "codeAddress($field)";
}
}
?>
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
print "codeAddress($field)";
creates invalid Javascript code because when PHP expands the $field variable it will not be in quotes. This prevents the map from displaying because the Javascript encounters a fatal error. Try this:
print "codeAddress(\"$field\")";
I'm trying to figure out why this PHP script isn't creating the map I specify in the HTML. any ideas?
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>
<script
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<?php
$lat = $_POST['lat'];
$long = $_POST['long'];
echo "
<script>
function callMap() {
var latlng = new google.maps.LatLng($lat, $long);"; ?>
var options = {
zoom: 5,
center: latlng,
mapTypeId = google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
options);
}
</script>
</head>
<body onload="callMap()">
<div id="map"></div>
</body>
</html>
Your options declaration syntax is messed up:
var options = {
zoom: 5,
center: latlng,
mapTypeId = google.maps.MapTypeId.TERRAIN // ERROR
};
Should be
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
You also missing a bracket on the google js link.
I don't use PHP so I can't tell if there's anything wrong with that code. If you removed the PHP and hardcoded lat/lon values, does the map work? Maybe one problem could be just what values the form is posting with the latitude and longitude. You're not doing any sort of validation to ensure they are within acceptable bounds, e.g. +90 to -90 for latitude and +180 to -180 for longitude.
I have a page which have lots of addresses. I want to have 'locate' link beside all the addresses which will take us to another page and show the location on google map. Since i am a total noob when it comes to google maps, can anyone help me how to do this? I definitely dont want to create separate pages for each address location. Any sleek/efficient method?
First grab the latitude and longitude from some geocoding service like Google.
$zoom = 15;
$type = 'ROADMAP';
$data = file_get_contents("http://maps.google.com/maps/geo?output=csv&q=".urlencode($address));
$arr = explode(",", $data);
if (count($arr)>=4) {
if ($arr[0]==200) {
$lat = $arr[2];
$long = $arr[3];
} else {
throw new Exception('Lookup failed');
}
} else {
throw new Exception('Lookup failed');
}
Then return a page which uses the Google Maps API.
<html style="height: 100%">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><?php echo $lat; ?>, <?php echo $long; ?></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $long; ?>);
var myOptions = {
zoom: <?php echo $zoom; ?>,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.<?php echo $type; ?>
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"<?php echo $lat; ?>, <?php echo $long; ?>"
});
}
</script>
</head>
<body onload="initialize()" style="height: 100%; margin: 0px; padding: 0px">
<div id="map_canvas" style="height:100%;"></div>
</body>
</html>
You can try it here: http://www.exorithm.com/algorithm/view/show_address