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.
Related
I have a code which should take the input of latitude and longitude from the user and display the location of the user. Well, the map is getting displayed, but the marker is not getting displayed. Please help...
<html>
<head>
<title>Map</title>
<script type='text/javascript'
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDFLaJwxTIGpZmwfpbEyOU5XZglUq6-5iM&sensor=false'>
</script>
<?php
$lat= $_POST['lat'];
$long= $_POST['long'];
?>
<script type='text/javascript'>
var latitude = "<?php echo $lat; ?>";
var longitude ="<?php echo $long; ?>";
function initialize()
{
var myLatLng = new google.maps.LatLng(latitude,longitude);
var mapProp = {
zoom:8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById('map_canvas'),mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
optimized: false,
title:'Former About.com Headquarters'
});
}
</script>
</head>
<body onload='initialize()'>
<div id='map_canvas' style='width:300px; height:300px;'></div>
</body>
</html>
Try to change:
position: myLatlng
to:
position: myLatLng
since your variable name is myLatLng not myLatlng
Your marker requires POST data to be constructed, but you don't have a form of any sort.
i trying to display many markers on google map.all works fine in too cases
i display ONE marker
i write the GPS localisations of different markers
i have a data base which contains Longitude,latitude values
i want to dispaly those values as markers on my map
here is a try but is not working,plz help me i spend all day already :/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<? php
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var listedespoints=[
<? php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
1) As #mauno-v told you use liste_des_points instead of listedespoints to loop.
2) In your loop you use the secnd and third entry liste_des_points[i][1], liste_des_points[i][2] while you only create two entries.
3) in you click event you use locations[i][0] where locations is not defined.
So create a list with three entries ['location name','latitude','longitude'] or change your indices and variable names.
See below:
<?
error_reporting(E_ALL);
ini_set('error_reporting','on');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<?php
/*$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);*/
$listeDesPoints='[\'Location 1\',47.45,2],[\'Location 2\',47.46,1.6],[\'Location 2\',47.47,1]';
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var liste_des_points=[
<?php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(liste_des_points[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
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>
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 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