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");
}
?>
Related
This the link of my code visit https://www.dropbox.com/s/1j0qc2uyp8vm9xj/map_user.php, this code is not working. I used JSON to get the array of data in mysql then echo it to javascript but when I try to run it I only see a gray map. Can anyone help me?
<?php
include('lock.php');
include('function/query.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>USER MAPS AND UPDATES</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<?php
$x = 0;
$query = "SELECT lat,lng FROM messages WHERE uid_fk='1'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data[$x] = array("lat" => $row['lat'], "lng" => $row['lng']);
$x++;
}
?>
<script type="text/javascript">
var markers = <?php echo json_encode($data); ?>
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps();
</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'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