hi I need help to show a map into my web page I don't know for what reason i cannot display the map, below my code I update google secret key:
<?php
session_start();
include '../../WSweb/serv.php';
if(isset($_SESSION['user']) )
{
if ($_SESSION["id"]==1)
{
$ID_Bodega=$_SESSION["ID_Bodega"];
include ("../conexion.php");
$sql=mysqli_query($con,"select * from `tabla`.`Datos` where `Datos`.`ID_Bodega`='$ID_Bodega' ");
while($row=mysqli_fetch_array($sql))
{
$lat=$row['latitud'];
$lng=$row['longitud'];
}
//mysqli_close($bd);
?>
<?php require_once('../../Connections/catalogo.php'); ?>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Cambiar aqui"></script>
<!-- TemplateBeginEditable name="doctitle"
</script>
-->
<title>Pedidos</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../../CSS/styles/eCommerceStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
//var pint=new google.maps.LatLng(20.6416592,-103.3492883);
center: new google.maps.LatLng(<?php echo $lat.', '.$lng; ?>),
zoom: 11,
mapTypeId: 'roadmap'
});
downloadUrl("../../Bodega/mark3.php", function(data) {
var xml = data.responseXML;
var mark3 = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < mark3.length; i++) {
var name = mark3[i].getAttribute("ID_Bodega");
var point = new google.maps.LatLng(
parseFloat(mark3[i].getAttribute("lat")),
parseFloat(mark3[i].getAttribute("lng"))
);
var marker = new google.maps.Marker({
position: point
//,center:point
, map: map
,});
}
});
downloadUrl("../../Bodega/markers.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var icon = '../../Bodega/marker1.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon
});
var popup = new google.maps.InfoWindow({
content: '<a href="../../Bodega/mostrar?recordID='+name+'">ver '+name+'</a>'});
popup.open(map, marker);
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body>
<div class="container">
<div class="header"><div class="headerint"><!-- end .header --><img src="../logo.jpg" width="200" height="33" alt="logo" /></div></div>
<div class="subcontenedor">
<div class="sidebar1">
<?php include("../Includes/Admin.php");
?>
<!-- end .sidebar1 --></div>
<div
class="content" onload="load()" ><!-- TemplateBeginEditable name="contenido" -->
<h1> Mapa</h1>
<div id="map"></div>
<!-- TemplateEndEditable -->
<!-- end .content --></div>
</div>
<div class="footer">
<?php include("../Includes/foot.php");
?>
<!-- end .footer --></div>
<!-- end .container -->
</div>
</body>
</html>
<?php
}
else
{
echo '<script> window.location="../index"; </script>';
}
}
else
{
echo '<script> window.location="../index"; </script>';
}
?>
and this is the CSS, to be honest i suppose that the problem it's in the Css but i dont have idea:
@charset "utf-8";
body {
font: 90%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px; }
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #000000;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 100%;
background: #FFF;
margin: 0 auto;
}
.header {
background: #954a9a;
}
.sidebar1 {
float: left;
width: 200px;
background: #e2a5e6;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #ADB96E;
color: #FFF;
}
.footer {
padding: 10px 0;
background: #954a9a;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#info {
font-size: 18px;
background: #ffffff;
width: 350px;
border-radius: 6px;
text-align: center;
color: #666666;
border: solid 1px #666666;
margin: auto;
padding: 3px;
}
#enviar {
background: #fff;
font-size: 22px;
text-align: left;
color: #000;
margin: 10px 60px;
padding:3px 10px 3px 10px;
border-radius: 6px;
}
#respuesta {
margin: auto 60px;
}
#googleMap {
margin: 10px auto;
width:90%;
height:90%;
border: 2px solid #666666;
border-radius: 6px;
}
#map {
margin: 10px auto;
/* width: 90%; */
height: 80%;
border: 2px solid #666666;
border-radius: 6px;
}
.titular {
background: #ffffff;
font-size: 32px;
color: #000;
margin: 40px auto;
text-align: center;
width: 50%;
padding:3px 10px 3px 10px;
border-radius: 6px;
border: solid 1px #999999;
}
NOTE: Obviously change the secret key and if I try a blank html the map works, somebody can helps on this problem I will appreciate it very much
I attached an image that you can see the final result that i have, I never see the map :(
