We Keep Coding

Laravel fetch longitude and latitude from database and display markers on Google Map

Hello guys I need help from you. I'm coding a web application using laravel framework. I've recorded logitudes, latitudes and other informations in the database. I want to fetch those informations and display their marker on google map. All examples I'm getting are for PHP scratch code. Is there anyone who can help me how to do it in laravel?
HERE IS THE DATABASE CODE
Schema::create('alertes', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('code');
$table->string('code_client');
$table->string('client_category');
$table->string('longitude');
$table->string('latitude');
$table->timestamps();
});
HERE IS MY BLADE FILE
<div id="map" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
</div>
#endsection()
#section('custom-script')
<script type="text/javascript" src="{{asset('assets')}}/map/carte_alertes.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnyJJ2gorvX0rsuhBJLNUsfyioWSSep2Q&callback=init"></script>
<script>
</script>
#endsection
HERE IS MY SCRIPT.JS
<script>
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
var map;
// Beni
var center = new google.maps.LatLng(0.496422, 29.4751);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
makeRequest("{{route('alertes.index')}}", function (data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}
// displayLocation method
function displayLocation(location) {
var content = '<div class="infoWindow"><strong>' + location.code_client + '</strong>'
+ '<br/>' + location.client_category + '</div>';
if (parseInt(location.latitude) == 0) {
geocoder.geocode({'client_category': location.client_category}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.code_client
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(location.latitude), parseFloat(location.longitude));
var marker = new google.maps.Marker({
map: map,
position: position,
title: location.code_client
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
}

change callback=initMap not callback=init
src="https://maps.googleapis.com/maps/api/js?key=yourapikey&callback=init"></script>

try your data format this way
public function mapMarker(){
$locations = Alerte::all();
$map_markes = array ();
foreach ($locations as $key => $location) {
$map_markes[] = (object)array(
'code' => $location->code,
'code_client' => $location->code_client,
'client_category' => $location->client_category,
'longitude' => $location->longitude,
'latitude' => $location->latitude,
);
}
return response()->json($map_markes);
}

copy this code and re-place this code
content : `<div><h5>${Number(datas[index].latitude)}</h5><p><i class="icon address-icon"></i>${Number(datas[index].longitude)}</p></div>`

Still having the problem
HERE IS MY NE
function initMap(){
var mapElement = document.getElementById('map');
var url = '/map-marker';
async function markerscodes(){
var data = await axios(url);
var alerteData = data.data;
mapDisplay(alerteData);
}
markerscodes();
function mapDisplay(datas) {
//map otions
var options ={
center :{
lat:Number(datas[0].latitude), lng:Number(datas[0].longitude)
},
zoom : 10
}
//Create a map object and specify the DOM element for display
var map = new google.maps.Map(mapElement, options);
var markers = new Array();
for (let index = 0; index < datas.length; index++){
markers.push({
coords: {lat: Number(datas[index].latitude), lng:Number(datas[index].longitude)},
content : '<div><h5>${datas[index].code_du_suspect}</h5><p><i class="icon address-icon"></i>${datas[index].etat_du_suspect}</p></div>'
})
}
//looping through marker
for (var i = 0; i < markers.length; i++){
//une fontion a creer si dessous
addMarker(markers[i]);
}
function addMarker(props){
var marker = new gooogle.maps.Marker({
position : props.coords,
map: map
});
if(props.iconImage){
marker.setIcon(props.iconImage);
}
if(props.content){
var infoWindow = new google.maps.infoWindow({
content : props.content
});
marker.addListener('click', function () {
infoWindow.open(map, marker);
});
}
}
}
}

Markers of two different types in Googlemap JS

I am working on a website for a small Estate agency.
I have a google map on the site showing all the available properties, with the properties data drawn from a Mysqli database via an XML call. All this is working.
The client now wants the locations of the offices added. These are not in the database, and so will require adding manually.
Is it possible to have two different 'var marker = new google.maps.Marker({' calls? If so, I can't find where to position it outside of the loop that pulls each property data.
The working code is:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(40.300000, 15.800000),
zoom: 9
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('mapXMLcall.php', function(data) {
var xml = data.responseXML;
var property = xml.documentElement.getElementsByTagName('property');
Array.prototype.forEach.call(property, function(propertyElem) {
var id = propertyElem.getAttribute('Idnumber');
var name = propertyElem.getAttribute('Name');
var price = propertyElem.getAttribute('Price');
if (price == '999999') {var price = "POA"};
var point = new google.maps.LatLng(
parseFloat(propertyElem.getAttribute('Lat')),
parseFloat(propertyElem.getAttribute('Long')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = ' €' + price;
infowincontent.appendChild(text);
var marker = new google.maps.Marker({
map: map,
position: point,
url: 'dbtest2.php?id=' + id
});
marker.addListener('mouseover', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function() {
window.open("dbtest2.php?id=" + id, "_blank", "toolbar=no,scrollbars=yes,status=no, resizable=yes,top=100,left=100,width=920,height=900")
});
});
});
}
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>
Any advice gratefully received.

Just add any "fixed" markers in your initMap function after you initialize the map variable (can be either before or after you call downloadUrl).
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(40.300000, 15.800000),
zoom: 9
});
var infoWindow = new google.maps.InfoWindow;
// add a fixed marker
var anotherMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(40.300000, 15.800000),
});
downloadUrl('mapXMLcall.php', function(data) {
// ...
}
}

Google Map markers are not displayed (lat, lng values and other information is loaded from an xml file)

I am working on the example given here:- https://developers.google.com/maps/documentation/javascript/mysql-to-maps
I am at the point "Loading xml file". I have linked database with php to form xml file (File.xml) of the data given but I don't know why is it not working. I have tried many other examples. But could not just figure out the part "how to load xml file" as no code worked and there's no error in the console.
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('File.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.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);
}
function doNothing() {}
</script>

You just forgot to copy the last line of the downloadUrl function: request.send(null);

mark data in xml file on google maps

I want to mark some data on google map.
I use eclipse Java EE and xml file is in the same workspace;(workspace_jsp).
xml file:
<csv_data>
<row>
<time>10:01:43</time>
<latitude>37.4805016667</latitude>
<longitude>126.952741667</longitude>
<pdistance>0.000555</pdistance>
<totaldistance>0.000555</totaldistance>
<sectionspray>3343.0</sectionspray>
</row>
<row>
<time>10:01:57</time>
<latitude>37.4807483333</latitude>
<longitude>126.952753333</longitude>
<pdistance>0.027396</pdistance>
<totaldistance>0.027951</totaldistance>
<sectionspray>3320.0</sectionspray>
</row>
my code is
<!DOCTYPE html >
<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/MySQL & Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=~~~~"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.466285,126.948366),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("mark_info.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("/csv_data/row");
for (var i = 0; i < markers.length; i++) {
var time = markers[i].getAttribute("time");
var ss = markers[i].getAttribute("sectionspray");
var pd = markers[i].getAttribute("pdistance");
var td = markers[i].getAttribute("totaldistance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.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 onload="load()">
<div id="map" style="width: 2500px; height: 1500px"></div>
</body>
</html>
map is loaded on browser(IE, CHrome) but marks and infowindow..
what is wrong and how can I fix it?? please help me..

Your xml is not formatted as xml attributes. You can't retrieve it using getAttribute. The data is the content of XML elements. I use a nodeValue function from geoxml3 to retrieve the text from the element. To get the element, you can use getElementsByTagName, which returns an array of elements, if there is only one, that will be [0].
var markers = xml.getElementsByTagName('row');
for (var i = 0; i < markers.length; i++) {
var time = nodeValue(markers[i].getElementsByTagName("time")[0]);
var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]);
var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]);
var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]);
var point = new google.maps.LatLng(
parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])),
parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0])));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
proof of concept fiddle
code snippet:
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
var xml = xmlParse(xmlData);
var markers = xml.getElementsByTagName('row');
for (var i = 0; i < markers.length; i++) {
var time = nodeValue(markers[i].getElementsByTagName("time")[0]);
var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]);
var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]);
var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]);
var point = new google.maps.LatLng(
parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])),
parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0])));
console.log(point.toUrlValue(6));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bounds.extend(point);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
/**
* Extract the text value of a DOM node, with leading and trailing whitespace trimmed.
*
* #param {Element} node XML node/element.
* #param {Any} delVal Default value if the node doesn't exist.
* #return {String|Null}
*/
var nodeValue = function(node, defVal) {
var retStr = "";
if (!node) {
return (typeof defVal === 'undefined' || defVal === null) ? null : defVal;
}
if (node.nodeType == 3 || node.nodeType == 4 || node.nodeType == 2) {
retStr += node.nodeValue;
} else if (node.nodeType == 1 || node.nodeType == 9 || node.nodeType == 11) {
for (var i = 0; i < node.childNodes.length; ++i) {
retStr += arguments.callee(node.childNodes[i]);
}
}
return retStr;
}
var xmlData = '<csv_data><row><time>10:01:43</time><latitude>37.4805016667</latitude><longitude>126.952741667</longitude><pdistance>0.000555</pdistance><totaldistance>0.000555</totaldistance><sectionspray>3343.0</sectionspray></row><row><time>10:01:57</time><latitude>37.4807483333</latitude><longitude>126.952753333</longitude><pdistance>0.027396</pdistance><totaldistance>0.027951</totaldistance><sectionspray>3320.0</sectionspray></row>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Scope issues when trying to clear Google map markers

I created a google map with this code:
function load() {
var markersArray = [];
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("getMapMarkers.php", function(data) {
var bounds = new google.maps.LatLngBounds();
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var brewID = markers[i].getAttribute("brewID");
//construct url
var breweryLink = "http://beerportfolio.com/breweryPage.php?id=" + brewID;
//create directions link
http://maps.google.com/maps?daddr=
var directionsLink = "http://maps.google.com/maps?daddr=";
directionsLink = directionsLink + markers[i].getAttribute("lat") +"," + markers[i].getAttribute("lng")
var html = "<b>"+name+" </b> <br/>" ;
html = html + "<br> <br>";
html = html + "(Click for Directions)";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
bounds.extend(point);
}
map.fitBounds(bounds);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.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 getMapVisit()
{
alert("clearing overlays...");
clearOverlays();
return false;
}
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function doNothing() {}
When I try an delete the markers to re-load different ones, I cannot delete them off the map.
On button press I call getMapVisit() which then calls clearOverlays(), but clearOverlays() doesn't clear the map. In Chrome, when I inspect the element I get this error:
Uncaught ReferenceError: markersArray is not defined
The error is called on line 86 which is:
if (markersArray) {
I do not know why its not defined when its clearly initialized array at the top of load()

You need to define var markersArray = []; above the load function so it will be globally defined and will be accessible in all the functions .