I am developing a Google maps application, latitudes and longitudes are coming from external device and storing into the database for every five seconds.
So I have to query the database every five seconds and get the new latitude and longitude of the database and moving the marker according to that.
How it can be done? Is it good to write ajax call?
Here is an example that pulls data every few seconds and replots the markers: http://www.robotwoods.com/dev/so_septa.html
here's the PHP it's calling:
<?php
$route=(isset($_REQUEST['route']))?$_REQUEST['route']:23;
echo file_get_contents("http://www3.septa.org/transitview/bus_route_data/".$route);
?>
I will guide you in the right way. I guess I could do that atleast:
a) You could have a function that queries your server at intervals using ajax (check out a library like jquery) and in the callback function of the function process the response.
b) your server will send a response to the server Ideally it will be a json response of the form
{
id:<>,
lat:
lng:
}
c) walk through google maps api to see how you can remove markers etc. you can probably maintain hash of markers in an associative array like markers[key] where key will be the identifier of a marker, if and when the marker updates you can use this associative array to remove the marker as:
markers[id].setMap(null);
Code to add markers in callback:
var options = {
position: new google.maps.LatLng(lat, lng);,
icon: image,
zIndex: zIndex,
};
options.map=map;
var marker = new google.maps.Marker(options); //construct marker
markers[key] = marker; //store the marker in array
Related
I am trying to not show markers when a user(noob) has established a 'connection' with another user(master). I currently have my database like this:
ERD
The SQL for displaying the markers is as follows:
SELECT username, lat, lng, noob_or_master, title, game_id, users.id FROM users JOIN games ON users.game_id = games.id WHERE noob_or_master = 'master';
I am mapping through the list to display them. When the user(noob) wants to establish a new connection, a new row is added into the connections table with the noob/user's id and master/user's id.
connections table
The blue marker is the user's location and the red markers are the master's location.
map behavior currently
This is the JavaScript that displays the markers.
{
mastersList.map(master => {
if (master.game_id === user.game_id) {
return (
<Marker
key={master.id}
position={{ lat: Number(master.lat), lng: Number(master.lng) }}
icon={masterIcon}
onClick={() => { onSelect(master); handleOpenRequestModal() }}
/>
)
}
})
}
Is there some better SQL I can write that will only show markers if there isn't a connection linking the noob and master? Or do I need to write a fancy nested for loop on the client side? I tired the client side approach by using the existing SQL request with a new SQL request that pulls all the active connections, but I didn't get the results I wanted.
I tried doing different SQL GETs and using nested for loops.
I have a list of store addresses, and I'm trying to create a map out of it.
Using the Places API I am able to retrieve most of the informations and manually create and place the markers on the map:
const service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery({
query: '212 Enterprise Dr, Rockaway, Frank Pizza',
fields: ['all']
}, onPlaceFound);
However I'd like to select the original marker instead of overlapping a new one.
That is because I want the user to be able to open the default info window with store phone number, directions and stuff.
I know that I can re-create it, but it feels kinda lame since all the info is already there.
This SO post ask about the same, yet no solution has been found.
Based on the documentation found here, which shows findPlaceFromQuery(), the second parameter of findPlaceFromQuery should be a function where the first argument of that function is an Array of placeResults.
Therefore, after reviewing a link here and here your onPlaceFound function should be looking something like:
function onPlaceFound(placeResultsArray){
const firstResult = placeResultsArray[0], firstIconURL = firstResult.icon;
const latLng = firstResult.geometry.location, lat = latLng.lat(), lng = latLng.lng();
// do stuff with those variables here
}
Of course, that does not select Google's result as a Marker, but now you have the actual icon, and latitude and longitude.
I'm trying to pull lat and long data from a Parse database to create markers onto a map. The data is stored in a Parse database and I'm using Google Maps JS api v.3
My current code for connecting to Parse is not working;
//Load Markers from Parse, Check (Do we need to create a connection string)
$.get("parse-connect.js", function (data) {
$(data).find("marker").each(function () {
//Get user input values for the marker from the form
var address = '<p>'+ $(this).attr('address') +'</p>';
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('latitude')),parseFloat($(this).attr('longitude')));
//call create_marker() function for xml loaded maker
create_marker(point, name, address, false, false, false, "../img/map-marker-2.png");
});
});
"parse-connect.js" simply calls the Parse application ID and JS api key to connect.
If anyone has any suggestions or on-line tutorials that could help my Id be very grateful.
The database has a simple structure with 4 fields - objectID, address, lat, long, image.
I'm playing around with Meteor and I'm having trouble trying to wrap my head around a few concepts. One of the issues I'm currently dealing with is I'm trying to build a dynamic heat map using Google and Meteor. I've got an external to Meteor Mongo database (i.e. not the local MongoDB that Meteor provisions) located on my computer and within the database I've got a collection that has many documents, each document has a latitude value and a longitude value.
The problem I've having right now is that when I try and parse through the result set of the find() on my collection it's not getting populated and therefore my heatmap values aren't being drawn onto the screen. However, when I run the same command on the console I can get results. I figure the code and the data retrival running at the same time and one is beating out the other.
//Global scope
DestinationCollection = new Meteor.Collection("Destinations");
destinations = DestinationCollection.find();
if (Meteor.isClient) {
Template.searchMap.rendered = function () {
var airportData = [];
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(45.4158, -89.2673),
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var airportArray = new google.maps.MVCArray([]);
destinations.forEach(function(destination){
airportArray.push(new google.maps.LatLng(destination.Geolocation.Latitude, destination.Geolocation.Longitude));
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: airportArray,
radius: 20
});
heatmap.setMap(map);
};
}
The only solution I've come up with is to wrap the destinations.forEach with Deps.autorun:
Deps.autorun(function(){
destinations.forEach(function(destination) {
airportArray.push(new google.maps.LatLng(destination.Geolocation.Latitude, destination.Geolocation.Longitude));
});
});
This works but whenever I add a new document to the collection the count doubles and increases by 1. For example, if I had 10 items and I added 1 more to the collection the MVCArray would have 21 array elements rather than just 11.
Long story short, what is the proper way to get a collection, parse through a local collection initially and then only get the new value that was added to the collection rather than the entire thing again.
Look into observe or observeChanges (docs) rather than Deps.autorun:
destinations.observe({
added: function (doc) {
airportArray.push(new google.maps.LatLng(doc.Geolocation.Latitude,
doc.Geolocation.Longitude));
// Add code to refresh heat map with the updated airportArray
}
});
I'm trying to reload points on a map based on when someone clicks a button.
I have a couple json objects saved in memory, "data" and "data2". The following code takes the "data2" JSON file and sets it equal to the "data" JSON file and then triggers a map reload event.
dataholder = data
function myFunction() {
data = dataholder
window.data = data2;
google.maps.event.trigger(map, 'resize');
}
Currently, the map won't reload with the new set of data. However, I am not getting any error messages.
There's no map reload event. The resize event, when it comes from a window resize, will at most recalculate the map bounds and reproject the existing features (markers, polylines, polygons). For this case in particular, I don't think that manually triggering the resize event will have any effect.
In second place, you say you have two json files, but your code suggest you instead have two json objects already in memory (meaning you don't need to perform aditional requests to retrieve the value of data2). The rest of the answer will assume that.
If your original collection of markers came from "data", which is a collection of LatLng pairs, and you want to replace the markers for the contents of "data2" the process would be:
1.- Push the markers into an object where you can find them later on
var markers=[];
for(onemarker in data) {
var newmarker=new google.maps.Marker({map: map, position: new google.maps.LatLng({onemarker.lat, onemarker.lng}) });
markers.push(newmarker);
}
2.- When you want to replace the markers, first purge the markers array
while(markers.length) {
var oldmarker=markers.pop();
oldmarker.setMap(null);
};
3.- Fill the markers array with the data from the data2 object
for(onemarker in data2) {
var newmarker=new google.maps.Marker({map: map, position: new google.maps.LatLng({onemarker.lat, onemarker.lng}) });
markers.push(newmarker);
}
For this kind of markers, as for the regular features, there's no instantaneous binding between the object and the underlying data. This is slightly different for the new google.maps.Data() layer for which you can skip the iteration and just feed it a geoJSON array. You still need to have an object to store the current markers, or else you won't have a way to access them when you want to remove them.