i hope all of you are having a great day.
I come here with a question i have a form, with a dropdown menu with the list of locations of the company.
And below is my google maps api working. I get all the data from a previously received json from my api.
Im currently trying to make that when click on the map marker changes the value in the dropdown AGENCIA.
Heres the example of the form.
And here is the code, im almost there but i dont get it to work... right now i make an alert when i click on the marker to see if it the value is correct but when i click it the dropdown menu gets empty.
<?php
//Habilitar las sesiones
$codigoError ="";
session_start();
//Validar si existen las sesiones
if(!isset($_SESSION['vsJsonAgencias']))
{
header("location:../index.php");
}
//if(!empty($_SESSION['codigoError'])){
$codigoError = $_SESSION['codigoError'];
//}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="SGLabz">
<title>CitasWeb</title>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/portfolio-item.css" rel="stylesheet">
<link rel="stylesheet" href="../css/form-basic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script src="../js/form.js"></script>
<link href="../css/pikaday.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- date new-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body >
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><?php echo '<img alt="LOGO" height="40" width="40" src="http://'.$_SESSION['vsApache'].'/citasweb/icon.png"" >';?>CitasWeb</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Row -->
<form class="form-basic" id="form-basic" <?php echo 'action="http://'.$_SESSION['vsApache'].'/citasweb/gestAgenciafunc.php"';?> method="post">
<div class="form-title-row">
<h1>Seleccionar</h1>
</div>
<div class="form-row">
<label>
<span>Gestión</span>
<?php
echo '<select name="codgestion">';
$jsonData =$_SESSION['vsJsonAgencias'];
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->TipoGestion as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
}
echo '</select>';
?>
</label>
</div>
<div class="form-row">
<label>
<span>Fecha</span>
<input input type="text" id="datepicker" name="fecha" required/>
</label>
</div>
<div class="form-row">
<label>
<span>Agencia</span>
<?php
echo '<select id="agencia" name="agencia">';
//$jsonData = $_SESSION['vsJsonAgencias'];
$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->Agencias as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
//CAPTURAR NOMBRE DE LA AGENCIA
$_SESSION['vsNomagencia'] = $option->Nombre;
}
echo '</select>';
?>
</label>
</div>
<body onload = "loadMap()">
<h2>Agencias</h2>
<?php
//$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
?>
<center>
<div id = "map" style = "width:480px; height:480px;"></div>
<script>
// fake JSON call
function getJSONMarkers() {
var markers = <?php echo $jsonData ?>;
return markers;
}
function loadMap() {
// Initialize Google Maps
const mapOptions = {
center:new google.maps.LatLng(13.706360,-89.212204),
zoom: 10
}
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Usted esta aquí.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Load JSON Data
const data = getJSONMarkers();
// Initialize Google Markers
for(agencia of data.Agencias) {
let marker = new google.maps.Marker({
id: agencia.ID,
map: map,
position: new google.maps.LatLng(agencia.Latitud, agencia.Longitud),
content: agencia.Nombre,
})
marker.info = new google.maps.InfoWindow({
content: agencia.Nombre
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
marker = this;
alert('ID is :'+ this.id);
$(document).ready(function(){
$("#agencia").val(this.id);
});
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD-h6xw5-2X2DdSmL93dQmrR7p63Q_uv5w"></script>
</body></center>
<div class="form-row">
<button type="submit" >Consultar Horarios</button>
</div>
<center>
<?php
//print_r($_SESSION['codigoError']);
print_r( $codigoError);
?>
<br>
</center><br/>
<?php echo '<img alt="SALIR" height="42" src="http://'.$_SESSION['vsApache'].'/citasweb/php/regresar.png"" width="142">';?>
</form>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<?php echo '<center><img alt="SALIR" height="50" width="170" src="http://'.$_SESSION['vsApache'].'/citasweb/conticsa.png"" ></center><br/>';?>
<p class="m-0 text-center text-white">Copyright © Citas Web 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/pikaday.js"></script>
<script src="../js/moment.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
$.datepicker.regional['es'] = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
monthNamesShort: [ "ene","feb","mar","abr","may","jun",
"jul","ago","sep","oct","nov","dic" ],
dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
dayNamesMin: [ "D","L","M","M","J","V","S" ],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
$.datepicker.setDefaults($.datepicker.regional['es']);
} );
</script>
</body>
</html>
Thanks in advance..
The problem's with the $(document).ready - it is not required:
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
marker = this;
alert('ID is :'+ this.id);
//----$(document).ready(function(){
$("#agencia").val(this.id);
//----});
});
Related
this is the header which contains the search box and the ul in which the live search results should be showing up. It prints the information about the data items out to the console, which means that the data can be found but it doesn't change anything in the ul which is linked to be altered when search results are found. I also checked the jsonSerialize function and it seems to be correct.
<< ? php
//require_once('../Models/AuctionData.php');
require_once('../Models/AuctionDataSet.php');
$auctionDataSet = new AuctionDataSet();
$auctionDataSet = $auctionDataSet - > fetchSearch($_GET["q"]);
echo json_encode($auctionDataSet);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/my-style.css" rel="stylesheet">
<!--<script src="js/Script.js"></script>-->
<title>Auction Website -
<?php echo $view->pageTitle; ?>
</title>
</head>
<body role="" document ">
<div class="container ">
<div class="row ">
<div id="title " class="col-xs-12 ">
<img src="images/iconhead.jpg "/>
<div class="pull-right "> <h1><?php echo $view->pageTitle ?> </h1></div>
</div>
</div>
<div class="row ">
<div id="menu " class="col-xs-6 col-sm-3 col-md-2 ">
<ul class="nav navbar_default nav-stacked ">
<li>Home </li>
<?php if(isset($_SESSION['id']))
{
echo " <li><a href='Logout.php'>Logout</a></li>"; } else{ echo "
<li><a href='Login.php'>Login</a></li>"; echo "
<li><a href='Register.php'>Register</a></li>"; } ?>
<form><input type="text" class="form-control input-lg" id="search" placeholder="search">
</form>
<ul class="list-group" id="txtHint"></ul>
</ul>
</div>
<script type=application/javascript>
document.addEventListener("DOMContentLoaded", readyPage);
function readyPage() {
let searchIn = document.getElementById("search");
searchIn.addEventListener("keyup", showHint);
console.log("ready");
}
function showHint(event) {
const text = event.target.value;
console.log(event);
let xmlhttp = new XMLHttpRequest();
let uic = document.getElementById("txtHint");
if (text.length > 1) {
xmlhttp.open("GET", "Ajax/ajaxSearch.php?q=" + text);
xmlhttp.send();
return;
}
if (text.length < 2) {
uic.innerHTML = "";
return;
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let data = JSON.parse(this.responseText);
let uic = document.getElementById("txtHint");
uic.innerHTML = "";
data.forEach(function(obj) {
console.log(obj);
uic.innerText += '<li class="list-group-item"><p>' + 'obj._id' + 'obj._title' + '</p>';
});
}
};
}
</script>
<div id="content" class="col-xs-6 col-sm-9 col-md-10">
Hello i have a plugin gridstack, And already use this plugin
But i'm have a problem.
When i'm full screen mode browser my page show whitespace, but if not fullscreen mode this whitespace has gone
Fullscreen Mode
Not Fullscreen Mode
I'm confuse to fix this
this is my code
index.php
in pastebin Click Here
<?php include "element/connection.php"; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DMS | PJB UP. Muara Karang</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/square/blue.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/logo-pjb.png">
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js"></script>
<!-- Highchart -->
<script type="text/javascript" src="dist/js/highchart/highcharts.js"></script>
<script type="text/javascript" src="dist/js/highchart/highcharts-more.js"></script>
<script type="text/javascript" src="dist/js/highchart/exporting.js"></script>
<!-- GridStack -->
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack.css"/>
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack-extra.css"/>
<script src="dist/js/jquery-ui.js"></script>
<script src="dist/js/lodash.min.js"></script>
<script src="dist/js/gridstack/dist/gridstack.js"></script>
<script src="dist/js/gridstack/dist/gridstack.jQueryUI.js"></script>
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style type="text/css">
.grid-stack {
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
}
</style>
</head>
<body>
<div id="carousel-example-generic-v1" class="carousel slide widget-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$count_circle=0;
$data_circle = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($circle=mysqli_fetch_object($data_circle))
{ ?>
<li data-target="#carousel-example-generic-v1" data-slide-to="<?php echo $count_circle; ?>"
class="circle <?php if($count_circle==0){ echo "active"; }?>">
</li>
<?php
$count_circle++;
} ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$count_data=0;
$data_dash = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($dash=mysqli_fetch_object($data_dash))
{ ?>
<div class="item <?php if($count_data==0){ echo "active"; }?>">
<div id="grid_<?php echo $count_data ?>" class="widget-gradient widget-gradient-body grid-stack">
</div>
<script type="text/javascript">
LoadPage();
function LoadPage()
{
var options = {
float: false
};
$('#grid_<?php echo $count_data ?>').gridstack(options);
new function () {
this.serializedData = <?php echo $dash->data_show.";" ?>
this.grid = $('#grid_<?php echo $count_data ?>').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node, i) {
this.grid.addWidget($('<div id="induk"><div class="grid-stack-item-content">' + node.content + '</div></div>'),
node.x, node.y, node.w, node.h);
this.grid.movable('.grid-stack-item', false);
this.grid.resizable('.grid-stack-item', false);
}, this);
return false;
}.bind(this);
this.loadGrid();
};
var str = '<?php echo $dash->data_gen ?>';
var str_array = str.split(',');
for(var i = 0; i < str_array.length; i++) {
call_data(i);
}
function call_data(i){
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
var widget = $("#data_"+str_array[i]).val();
var convert_data = str_array[i];
$("#del_"+convert_data).remove(); //remove delete icon
$("#label_"+convert_data).remove(); //remove label
var height_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').height();
var width_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').width();
var formData = 'id_tr=<?php echo $dash->id_tr_halaman_dasboard ?>&id_tr_dt='+str_array[i]+'&id_tr_widget='+widget+'&width='+width_div_parent+'&height='+height_div_parent;
$.ajax({
type: "POST",
dataType: "html",
url: "element/get_data_dashboard.php",
data: formData,
success: function(msg){
if(msg == ''){
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html("");
}
else{
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html(msg);
}
}
});
}
}
</script>
</div>
<?php
$count_data++;
} ?>
</div>
</div>
</body>
</html>
element/get_data_dashboard.php
in Pastebin click here
<?php
include "connection.php";
$id_tr = $_REQUEST['id_tr']; //header dashboard
$id_tr_widget = $_REQUEST['id_tr_widget']; //id tr widget
$id_tr_dt = $_REQUEST['id_tr_dt']; //id tr detail
$width = $_REQUEST['width']; //width
$height = $_REQUEST['height']; //height
$mw_wg = mysqli_fetch_object(mysqli_query($con,"select * from tr_widget where id_tr_widget='".$id_tr_widget."'"));
$my_konek = mysqli_fetch_object(mysqli_query($con,"select * from connection where id_con='".$mw_wg->id_con."'"));
$sql_view = mysqli_fetch_object(mysqli_query($con,"SELECT query from sql_view where id_sql_view='".$mw_wg->id_sql_view."'"));
$id_type_widget = $mw_wg->id_type_widget;
if($my_konek->port=="" or $my_konek->port==null)
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
else
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name,$my_konek->port);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
// Image Slider
if($id_type_widget=="9"){
$RandomAccountNumber = uniqid();
?>
<center><div id="owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>" class="owl-carousel">
<?php
$list_value = $mw_wg->file_name;
$var=explode('***zzz****',$list_value);
$count = count($var);
foreach($var as $row) {
if (--$count <= 0) {
break;
}
?>
<div class="item"><img onerror="this.onerror=null;this.src='images/no_image.png';" style="height:<?php echo $height?>px; width:<?php echo $width?>px" src="images/images_video/<?php echo $row?>"></div>
<?php } ?>
</div></center>
<script>
$(document).ready(function() {
$("#owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>").owlCarousel({
autoPlay : true,
navigation : false,
singleItem : true,
pagination: false
});
});
</script>
<?php }
// Video
else if($id_type_widget=="7"){
$ext_file = end((explode(".",$mw_wg->file_name)))
?>
<head>
<link href="dist/js/videojs/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="dist/js/videojs/videojs-ie8.min.js"></script>
</head>
<body>
<video controls loop autoplay preload="auto" id="my-video" class="video-js" controls preload="auto" style="height:<?php echo $height?>px; width:<?php echo $width?>px" data-setup="{}" poster="images/fff.png">
<source src="images/images_video/<?php echo $mw_wg->file_name; ?>" type='video/<?php echo $ext_file?>'>
</video>
<script src="dist/js/videojs/video.js"></script>
</body>
<?php } ?>
See this link click here
I'm confused to remove whitespace when fullscreen mode.
Help Me Thank's
I'm getting the 'Oops! Something went wrong' message when trying to run this Googlemap. The map code worked fine when I was developing it in isolation (see 'mymap.php' file below), but it's only after I have integrated it into my html template that this has happened. I've tried moving it around and running the javascript both inside and outside the head tags but it doesn't seem to make a difference.
I thought it might be an issue with the API key, but seeing as it works fine in the 'mymap.php' file I reckon that mustn't be it.
Could it be with the fact that I have placed the Javascript to create the map into the head tag? Or is the Bootstrap header maybe interfering in some way?
mymap.php (which works fine):
<!DOCTYPE html>
<?php
include("includes/db.php");
include("functions/functions.php");
// Create connection
$conn = new mysqli("localhost","root","","lstest1");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<?php
if (isset ($_GET['loc_value'])) {
$locations = array(); // empty array to store location information
$county = $_GET['loc_value']; // which county are we going to map
$get_county = "select * from locations where county='$county'";
$result = $conn->query($get_county);
while ($row_locations = mysqli_fetch_assoc($result)){
$loc_name = $row_locations['loc_name'];
$latitude = $row_locations['latitude'];
$longitude = $row_locations['longitude'];
$description = $row_locations['loc_desc'];
$newLocation = array ("title" => $loc_name, "lat" => $latitude, "lng" => $longitude, "description" => $description);
array_push($locations, $newLocation);
}//while
}//if
//print_r($locations);
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = <?php echo json_encode($locations, JSON_PRETTY_PRINT); ?>;
window.onload = function() {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(54.6990782, -6.6171596),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (var i = 0; i < locations.length; i++) {
var data = locations[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
}//loadmap
</script>
<div class="map-responsive" id="map" style="width: 600px; height: 500px;"></div>
This is it placed within the Bootstrap template I am using - filename 'countymap.php':
<!DOCTYPE html>
<?php
include("includes/db.php");
include("functions/functions.php");
// Create connection
$conn = new mysqli("localhost","root","","lstest1");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<?php
if (isset ($_GET['loc_value'])) {
$locations = array(); // empty array to store location information
$county = $_GET['loc_value']; // which county are we going to map
$get_county = "select * from locations where county='$county'";
$result = $conn->query($get_county);
while ($row_locations = mysqli_fetch_assoc($result)){
$loc_name = $row_locations['loc_name'];
$latitude = $row_locations['latitude'];
$longitude = $row_locations['longitude'];
$description = $row_locations['loc_desc'];
$newLocation = array ("title" => $loc_name, "lat" => $latitude, "lng" => $longitude, "description" => $description);
array_push($locations, $newLocation);
}//while
}//if
//print_r($locations);
?>
<html lang="en">
<!-- Arvo font for webpage & font-awesome-->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Stoke' rel='stylesheet' type='text/css'>
<head>
<title>Location Scout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="styles/location.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = <?php echo json_encode($locations, JSON_PRETTY_PRINT); ?>;
window.onload = function() {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(54.6990782, -6.6171596),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (var i = 0; i < locations.length; i++) {
var data = locations[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
}//loadmap
</script>
</head>
<body>
<div class="container-fluid text-center">
<!-- MAIN HEADING AREA -->
<div class="row">
<div class="col-md-12">
<h1>
LOCATION SCOUT
</h1>
</div>
</div>
<!-- MAIN ACTIVITY WINDOW -->
<div class="row">
<div class="col-md-9">
<div class="map-responsive" id="map" ;"></div>
</div>
<!-- SIDEBAR/MENU AREA -->
<div class="col-md-3">
<div class="btn-group-vertical">
Homepage
User Page
</div>
<div class="container">
<div class="row">
<div class="form col-md-3">
<form method="get" action="results.php">
<input type="text" name="user_query" placeholder="Search for location"/>
<input type="submit" name="search" value="search"/>
</form>
</div>
</div>
</div>
<h2>Welcome!</h2>
<p>
This is your one-stop shop to plan your visit to some of Northern Ireland's most fascinating movie and Tv locations.
Start your search on the menus below or use the search box above to get plotting!
</p>
<h2>Start your search:</h2>
<div class="btn-group">
<button type="button" class="btn btn-warning">By County</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Antrim
</li>
<li>
Armagh
</li>
<li>
Down
</li>
<li>
Fermanagh
</li>
<li>
Londonderry
</li>
<li>
Tyrone
</li>
</ul>
</div><br>
<div><br></div>
<div class="btn-group">
<button type="button" class="btn btn-warning">By Genre</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Drama
</li>
<li>
Thriller
</li>
<li>
Documentary
</li>
<li>
Horror
</li>
<li>
Sci-fi
</li>
<li>
Children
</li>
<li>
Fantasy
</li>
</ul>
</div><br>
<div><br></div>
<div class="btn-group">
<button type="button" class="btn btn-warning">By Production</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Game of Thrones
</li>
<li>
Line of Duty
</li>
<li>
The Fall
</li>
</ul>
</div><br>
<div><br></div>
<div class="btn-group">
Login
Register
</div><br>
<br><div class="btn-group">
Admin
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I am using Intel XDK to try and get the google maps displayed on the screen at the location set in Intel XDK. However, I am having issues with actually displaying the map on the screen, after spending many hours researching trying to figure out why it isn't working I have hit a brick wall and I have no idea how to proceed from here.
So any help will be greatly appreciated to point me in the right direction, thanks in advance.
Index.html class
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
100% ; } #viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } #viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<!-- <script src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script src="js/app.js"></script>
<script src="js/Maps.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
</head>
<body id="afui" class="v2" onload="navigator.geolocation.getCurrentPosition(onSuccess, onError)">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage" data-role="page"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="maps" href="#Maps" data-transition="fade">Maps</a>
<a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gps">GPS</a>
</div>
<div class="upage" id="Maps" data-role="page" >
<div class="upage-outer" >
<div class="upage-content ac0 content-area vertical-col left" id="page_70_37"><a class="widget uib_w_4 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button">Button</a>
<div id="map" style="height: 500px; width: 300px; margin: 0; padding: 0;">
</div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_6" data-uib="jquery_mobile/footer" data-ver="0">
<h1>footer</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="outer-element uib_w_5 uib_crossbar botbar fixed bar-bg thumb-bg bar-gutter" data-uib="layout/bottom_crossbar" data-ver="1" data-anim="{'style':'overlap', 'v':400, 'side':'bottom', 'dur':500}">
<div class="sidebar-content content-area vertical-col">
</div>
</div>
</div>
</body>
</html>
App.js
var latitude;
var longitude;
var onSuccess = function(position) {
alert(
latitude = position.coords.latitude;
longitude = position.coords.longitude;
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var locationOptions = {
maximumAge: 10000,
timeout: 6000,
enableHighAccuracy: true
};
Maps.js
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 16,
center: new google.maps.LatLng(latitude,longitude)//{latitude, longitude}
});
//var marker = new google.maps.marker({position: LatLng, map:map});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
/* // stops the text directions when un commented
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
*/
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = new google.maps.LatLng(latitude,longitude)//{latitude, longitude};
var end = '10 Downing Street, Downing Street, London';
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Index_User_Scripts
/*jshint browser:true */
/*global $ */(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Button */
$(document).on("click", ".uib_w_1", function(evt)
{
/* your code goes here */
});
/* button #maps */
$(document).on("click", "#maps", function(evt)
{
/*global activate_page */
activate_page("#Maps");
initMap();
//calculateAndDisplayRoute();
});
/* button #gps */
$(document).on("click", "#gps", function(evt)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
You need to have permission to use Google API. I used the Google Maps widget and tried with two locations, Statue of Liberty and Taj Mahal. I was able to make it work in emulator as well as on the Intel XDK Preview apps on my phones. Details are in this post:
http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html
Here are the settings I used for the widget:
I am trying to add google maps for my form, so after they enter the address they can view map and after that maps latitude and longitude submitted to the database. So far I couldn't implement it. I tried it on jsfiddle and it worked. But when i try to add to the page it not working.
http://jsfiddle.net/pborreli/pJgyu/
Here is the full page.
<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My First Guide</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Write a review</li>
<li>Talk</li>
<li>Events</li>
<li>
<form class="navbar-search pull-left">
<!--You can put class="search-query" too.-->
<input type="text" class=".navbar-search" placeholder="Search">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- div container -->
</div><!-- div navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Submit Business Place</legend>
<div class="control-group">
<label class="control-label" for="input01">Business Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Please specify the name of business.(May
be it is a brand name)</p><br />
</div>
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="10"></textarea>
</div>
</div>
<label class="control-label" for="input01">Categories</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Use comma as a separator.</p><br />
</div>
</fieldset>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
But here is javascript stuff.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
And here is the div where i add my map.
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
I've done a quick scan of your code and there seem to be some basic coding problems:
You appear to create your map in an intialize function, but your initialize function appears to be embedded within the larger .change() callback function; I do not see how your map is ever going to be displayed.
Your JavaScript code is focused on a jQuery search for an element with the id: address, but there does not appear to be an element with that id in your markup.
The label you define that contains the text Address says that it is a label for: input01, but you have 2 distinct elements in your markup that have been assigned the id: input01.
There are multiple labels that have been marked as being the label for: input01.
All of the script tags you have defined at the bottom of your file are missing the type attribute.
I think you have too many basic coding errors and it looks like you may have possibly garbled the code during the process of submitting it for review? It's hard to tell, but I hope my feedback is helpful and will help you to get closer to your goal.