I have this code I used to get the location of each order i receive..
var map;
var markers = <?php echo $order ?>; //this should dump a javascript array object which does not need any extra interperting.
//var marks = []; //just incase you want to be able to manipulate this later
function initMap() {
var cent = {lat: {{$orderlat->Latitude }}, lng: {{ $orderlong->Longitude }} };
var map = new google.maps.Map(document.getElementById('mymap'), {
zoom: 15,
center: cent
});
$.each( markers, function( index, value ){
var lokasi = new google.maps.LatLng({{$order[0]->Latitude }}, {{ $order[0]->Longitude }});
var marker = new google.maps.Marker({
position: lokasi,
map: map
});
});
}
For now it can only return 1 marker, because i was using this
var lokasi = new google.maps.LatLng({{$order[0]->Latitude }}, {{ $order[0]->Longitude }});
I understand I need to remove the 0 to get the rest, however i got an error which reads:
Property [Latitude] does not exist on this collection instance.
I also understand that to remove that error, I need to put them in a blade foreach, my question is, how do we insert blade in script tags? If impossible, what can I do? thanks in advance
In the blade you can simple add tag everywhere that you need:
<script>
var app = 'dd';
</script>
this Code can add in for each and you add scripts that is related to Google map
here you can learn more about blade template system: https://laravel.com/docs/5.5/blade#displaying-data
I would suggest you to make an multi dimensional array of lat long and assign to jquery var
var marker_arr = '{{$marker_locations}}'
and at apply for loop on script to place marker on that location.
Hope this helps you.
Related
i hope you can help me with my following problem. since days I´m tinkering on it, but it won´t run...
I´m writing a little web-app based on Google Maps API on wich i can mark my actual position on a map with a modified marker-symbol an so on. Everything works great so far. I receive my geolocation via HTML5-Geolocation function and write the values in to a mysql database. In a separate function (see below) i read out this data an set the marker with my modified symbol on the map.
The next I wan´t to solve is to remove the marker after about 40 minutes automatically from the map. For this I created a separate table on my database which gets filled with the marker-information from the main table. This works so far, I solved it with a php-script and a cron-job. Then the entry from the main table becomes deleted. What makes me insane is to remove the marker after the 40 minutes from the map. I tried several things, from creating arrays with the data of the "to-remove-table", i played around with the setMap-function of Google Maps API, but I´m still on the line.
Here is my code where I read out the data from database and set the marker on the map:
function markPolitesse() {
var infoWindow_spotted = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("politesse_spotted");
for (var i = 0; i < markers.length; i++) {
var number = markers[i].getAttribute("number");
var city = markers[i].getAttribute("city");
var zipcode = markers[i].getAttribute("zipcode");
var street = markers[i].getAttribute("street");
var type = markers[i].getAttribute("street");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + city + "</b> <br/>" + zipcode + "</b> <br/>" + type + "</b> <br/>";
var marker = new google.maps.Marker({
map: map,
position: point,
title: number,
icon: politessenImage
});
bindInfoWindow(marker, map, infoWindow_spotted, html);
}
});
}
The main- and the "remove-table" contain the following fields:
number, city, zipcode, street, streetnumber, coordinates_lat, coordinates_lng, time, date
I hope you have a impulse for me I would be thankful...
Regards,
Stefan
Store the marker in a global variable/outside the function, then in your function do the following:
marker.setMap(null);
// set up new marker
Then assign your new marker.
I'm using the jquery ui map in my cordova iOS app, and need to encode all my database results (latitudes and longitudes) in JSON. I already set the localstorage element, and know I received the correct response, but I dont know how to encode all the results into a JSON array. I've tried using a for loop, but I must have done it incorrectly because my code then failed. One more thing, I know that the map works, and also that adding markers work, but I used the demo json array. I need to create my own array with my own objects, and dont know how to. Thanks for the help.
MAP.HTML
<script type="text/javascript">
$(document).ready(function() {
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
$('#map_canvas').gmap('addShape', 'Circle', {
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
}
});
});
var name = localStorage.getItem("name");
var lat = localStorage.getItem("lat");
var lon = localStorage.getItem("lon");
var it = localStorage.getItem("it");
alert(lat);
});
</script>
You need to convert your JSON object to string and store the string.
Use JSON.stringify(yourObject) to convert to string and JSON.parse([your Object from localstorage]).
See similar question
I was trying to follow this example http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515, to create custom markers.
I tried to change the example to use my data. The difference is that my data is already geocoded. I had trouble trying to figure why it didnt work when I changed the table id and the columns on the code.
So i printed the 'Address' on the original code and the one with my data.
The original code with the sample fusion-table, outputs the location like this
(37.4471132, -122.1602044)
Because my table is already geocoded I took away most of the function
function codeAddress(row) {
alert(row[1]);
var marker = new google.maps.Marker(
{
map : map,
position : row[1],
//this is where the magic happens!
icon : new google.maps.MarkerImage(icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
But the alert only diplays the coordinate a little bit different
<Point><coordinates>-78.423652,-0.203057,0.0</coordinates></Point>
So yeah, that is what I think it is not working
My opinion is that position : has to be followed by a google.maps.LatLng.
It looks like the row data is from KML, you need to extract the first two numbers to create the LatLng.
Mia DiLorenzo is right, the MarkerOption position expects a LatLng object.
Look at this example, which is very similar to yours, but it uses the Coordinates field to create the marker.
The example assumes, that the data in the Coordinates field is comma-separated "lat,lng"
e.g. 47.7672,-3.2022
But if your data happens to be in KML format then you can just extract the lat/lng values. The values are in order: longitude, latitude, and altitude (see the KML reference for details about KML coordinates):
function createLatLngObject(kmlString) {
//remove XML tags from input
var xmlRegEx = /<\/?\w+>/;
var kmlValue = kmlString.replace(xmlRegEx,'');
// now kmlValue contains e.g. -78.423652,-0.203057,0.0
//extract latitude and longitude
var coordinates = kmlValue.split(",");
var lat = coordinates[1];
var lng = coordinates[0];
return new google.maps.LatLng(lat, lng);
}
function createMarker(row) {
var latlng = createLatLngObject(row[1]);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
I'm trying to pass two variable to a piece of Marker code that draws the markers on the map i just don't know how to pass the variable what type must they be in order for me to achieve this heres what im trying to do:
double car = -23.363882;
double car2 = 126.044922;
position: new google.maps.LatLng(car,car2)
In JavaScript, variables should be declared using the var statement. I'm not sure where you got double from.
Here's how you draw a marker on a map:
var lat = -23.363882;
var lng = 126.044922;
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: theMap,
position: latLng
});
I hate to say RTFM, but the API docs do spell out the answer to your question. http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
car and car2 variables should be declared in the following manner :
var car = -23.363882;
var car2 = 126.044922;
Note that Javascript doesn't use concrete types when declaring a variable.
i want to implement a google map based on its api. i want to add a path based on coordinates to it. therefore i get my coordinates from my model and want to iterate over the object to fille the map with this points. in my jade template i include the api js code like this:
script(type='text/javascript')
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
- if (typeof(pins) != null)
- var.pins.forEach(function(pin) {
new google.maps.LatLng(pin.latitude, pin.longitude),
- })
new google.maps.LatLng(0,0)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
div#map_canvas(style='height: 500px; background-color: #990000;')
the problem is: jade renders this snippet
var flightPlanCoordinates = [
- if (typeof(pins) != null)
- var.pins.forEach(function(pin) {
new google.maps.LatLng(pin.latitude, pin.longitude),
- })
new google.maps.LatLng(0,0)
];
as it is in the jade template source... the - if etc. doesn't get parsed! any ideas?
thanks!
The entire script tag (everything indented under it) is going to be passed through raw without further parsing. Jade does HTML templating not HTML templating plus nested javascript templating. To pass your pins variable from jade local template variable data to script source code, you'll have to do some other approach like using raw jade to render a tiny script tag that just calls your initialize function with the pins data as a literal, or stick your pins data into the dom somewhere and then read it from there. Something along these lines below your script tag (pseudocode, haven't tested)
- if (typeof(pins) != null)
!= "<script type='text/javascript'>"
!= "var pins = [];"
- forEach pin in pins
!= "pins.push(new Pin(" + pin.latitude + ", " + pin.longitude + "));"
!= "initialize(pins);"
!= "</script>"
I passed the value as a hidden input element, e.g.:
input(type='hidden', id='variableName', value='#{variableName}')
Accessed via jQuery:
$("#variableName").val()
Joe
You can use this:
script
console.log(#{var_name});
the script tags are purely text, you can't easily mix the Jade to generate this javascript, it's usually a reflection of poor design. You can just serialize things as JSON that you need on the client or use express-expose to do this
server side
JSON.stringify(users)
client side
var users=JSON.parse(("#{users}").replace(/"/g,'"'));
I had a similar issue and this line of code solved it:
var myvar = !{JSON.stringify(mydata)};
The answer came originally from this post