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>
Related
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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);
//----});
});
I know am asking a similar question which already have lot of answers. But I am not able to figure out the Solution for my problem.
Here I am using Laravel 5.2, I am trying to get the latlng from mysql database and display in the map. I am using Google Maps api v2. My exact problem is that I am getting the latlng values in my console but I am not able to display it on the map. here I am attaching the full code. Any help would be greatful.
This is my MapController.php
class MapController extends Controller
{
public $type = 'Map';
public function getIndex()
{
$location = DB::table('eventdata')->simplePaginate(500);
return view('map.map')->with('location', $location);
}
here is my map.blade.php
<head>
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByrgAtWpei65izUKYhdyr9-r54rrMZ8Zc&callback=initialize">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{{ asset('ico/opengts.png') }}">
<title>Open GTS</title>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand active" href="#">Geo Punch Solution</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">About Us</li>
<li class="">Account Admin</li>
<li>User Admin </li>
<li>Vehicle Admin </li>
<li>Group Admin </li>
<li>Geozone Admin </li>
<li>Change Password </li>
</ul>
</div>
</div>
</div>
<script>
function initialize() {
var map = document.getElementById('map');
// Initialise the map
var map_options = {
center: location,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maps = new google.maps.Map(map, map_options);
// Put all locations into array
var locations = [
#foreach ($location as $locations)
[ {{ $locations->latitude }}, {{ $locations->longitude }} ]
#endforeach
];
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: location,
map: maps
});
}
// marker.setMap(map); // Probably not necessary since you set the map above
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
{{--#endforeach--}}
</script>
<style type="text/css">
#map {
width: 1170px;
height: 570px;
margin-top: 100px;
margin-left: 100px;
}
</style>
</div>
</div>
</head>
<body>
<div id="map"></div>
<p id="error"></p>
</body>
I am getting error like below.
Uncaught TypeError: Cannot read property '77.597639984451' of undefined
Please help me out..
Thanks in Advance
NOTE: ALL BRACES AND TAGS ARE CLOSED PROPERLY.
As Matej already pointed out, you're missing a comma between your array elements.
var locations = [
#foreach ($location as $locations)
[ {{ $locations->latitude }}, {{ $locations->longitude }} ]
#endforeach
];
That gives you this JS, which isn't valid:
var locations = [
[ 12.995250017848, 77.601860021241 ]
[ 13.003339979332, 77.597639984451 ]
[ 13.003339979332, 77.597639984451 ]
];
Your code should be:
var locations = [
#foreach ($location as $locations)
[ {{ $locations->latitude }}, {{ $locations->longitude }} ],
#endforeach
];
Which would then give you this JS:
var locations = [
[ 12.995250017848, 77.601860021241 ],
[ 13.003339979332, 77.597639984451 ],
[ 13.003339979332, 77.597639984451 ],
];
(the trailing comma on the last element isn't necessary, and might be marked as invalid by any JS code linting tool, but otherwise shouldn't cause any problems).
Update: and here's a simple way to at least provide the map itself with some kind of centre, using your existing locations. There are better methods, such as making the map's Bounds fit all the locations, but you've not asked for that.
Firstly, create your array of locations. Then use the first one to set the map's centre:
var locations = [
#foreach ($location as $locations)
[ {{ $locations->latitude }}, {{ $locations->longitude }} ],
#endforeach
];
// Initialise the map
var map_options = {
center: {lat: locations[0][0], lng: locations[0][1]},
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maps = new google.maps.Map(map, map_options);
I'm doing a project in Jquery Mobile and having a problem with the Google API. When I navigate to the MapPage from diffrent page the MapPage by itself shows the map OK, but when moving from the HomePage to MapPage it only shows half of the map. If I manually refresh or resize map it will fix it - but I've tried map.resize() without luck so I need a different solution.
I've attached my HTML code of the HomePage and MapPage below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Project - Mobile" />
<meta name="author" content="Yuval Vardi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RentAcar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="JS/jquery-2.0.2.js"></script>
<script src="JS/jquery.mobile-1.3.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="JS/mapScript.js" > </script>
</head>
<body>
<div id="HomePage" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
Trip Info
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
</div>
</div>
<div id="calculate" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
<table id="mapTable">
<tr>
<td>
<p>Pickup location</p>
</td>
<td></td>
<td>
<p>Where do you go?</p>
</td>
</tr>
<tr>
<td>
<input id="startInput" type="text" value="" placeholder="Start location" />
</td>
<td></td>
<td>
<input type="text" id="end" placeholder="Return location"/>
</td>
</tr>
<tr>
<td data-role="controlgroup">
<button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button>
</td>
<td></td>
<td data-role="controlgroup">
<button onclick="calcRoute()" data-theme="b" > Calculate rout </button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="map-canvas" style="width:400px; height:280px;">
</div>
</td>
</tr>
</table>
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
<a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a>
</div>
</div>
</body></html>
My javascript file:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: israel // where to center the map on initial!
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
initialize();
var start = document.getElementById('startInput').value;
var end = document.getElementById('end').value;
var distanceInput = document.getElementById("distance");
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});}
google.maps.event.addDomListener(window, 'load', initialize);
function getMarker() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
}
function showPosition(position) {
var lat=position.coords.latitude;
var long=position.coords.longitude;
marker(lat,long); //calls the marker function
}
function showError(error)
{
alert ("Error loading map");
}
function marker(lat,long) {
var myLatlng = new google.maps.LatLng(lat,long);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$("#startInput").attr("value",myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"You are Here!"
});
}
The map div has zero width. To use a percentage width, you have to define the width of all its parents (or at least up to a fixed size element that can be used to compute the width).
See Mike Williams' Google Maps API v2 tutorial page on percentage sizing
You need to call checkResize() API function. Like This:
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.checkResize()
This one worked for me as well
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.