Integrate google map direction with 8 + way points in angularjs - javascript

I have requirement to integrate google map api with multiple waypoints.
Available data I have is array of latitude , longitude & timestamp. say :
$scope.locations = [
{latitude : 22.152454, longitude:88.455454 , timestamp:"21451457451"},
{latitude : 32.152454, longitude:88.44554 , timestamp:"21451457451"},
{latitude : 12.152454, longitude:88.875454 , timestamp:"21451454451"},
{latitude : 54.152454, longitude:88.8755454 , timestamp:"21521457451"}
]
Now I want to have google map displayed in my application with markers showing datetime of waypoints.
I tried ngmap but this dosen't support more then 8 points also I didnt found it much effective .

If you're not limited in using AngularJS, this sample from the Google Maps API developer site seems to fit with what you want to do.

Related

Saving array to MySQL in specific format

I have a form that submits data to a MySQL table. Specifically, it's using Gravity Forms, a plugin for WordPress, but this isn't really specifically related to either that plugin or WP. I'm just trying to figure out how to format my data so it gets stored in the right format in MySQL.
I'm using the Google Maps Javascript API to look at a specific field, perform Google Maps' auto-complete to retrieve a place, and then take the name of that place (which is what the API returns) and use the Google Maps Geocoding API to add the latitude and longitude.
I know that I need the information stored in the database like this:
a:3:{s:7:"address";s:12:"101 First St";s:3:"lat";s:10:"25.8018672";s:3:"lng";s:18:"-80.12885949999998";}
So I'm trying to create a value for the input by combining the dynamic stuff I am successfully getting, such as the actual street address, lat and longitude, in a variable like this:
place_shebang = 'a:3:{s:7:"address";s:' + place_name_length + ':"' + theplacename + '";s:3:"lat";s:' + place_lat_length + ':"' + theplacelat + '";s:3:"lng";s:' + place_lng_length + ':"' + theplacelng + '";}';
But that saves the data like so when I view it in MySQL:
s:117:"a:3:{s:7:"address";s:12:"101 First St";s:3:"lat";s:undefined:"40.528263";s:3:"lng";s:undefined:"-78.86381770000003";}";
So my question is, what should I do with place_shebang to get it to store in the proper format?
Instead of creating a serialized string, recreate the object and have that saved.
$place_shebang = [
"address" => $theplacename,
"lat" => $theplacelat,
"lng" => $theplacelng,
];

How to pass parameters to URL and retrieve with PHP?

I noticed that there are a lot of these questions but I can't find something that relates to my particular project. I am building a Instagram and Google maps app. What I'm trying to do is I'm pulling all JSON format endpoints from Instagram with PHP. With Google maps, I'm adding the longitude and latitude coordinates that this certain API call passes through so you can see where the user has taken the photo at the time it was created. What I'm working on is using Google's event methods I am able to center longitude and latitude coordinates to the URL using the function parent.location.hash.
google.maps.event.addListener(map, 'center_changed', function(){
var control_center = map.getCenter();
var lng = control_center.lng();
var lat = control_center.lat();
parent.location.hash="&lng="+lng +"&lat="+lat;
$('.lng').append(lng);
console.log(map.getCenter());
console.log(lng +', ' +lat);
});
The issue I'm now running into is when I tried to retrieve lng and lat with PHP $_GET it was not working. I found out because it's a fragment and it never gets sent to the server. I found other tips and tricks like parse_url but that echos one string. Here is a snippet of what the current URL looks like when someone has done a search and moving Google maps around in the viewport -> api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117.
The concept behind this API mashup is you have a search box, and you type in Houston, TX. Google maps will load and a feed from Instagram with display that have coordinates that are within Houston, Tx. The map will show where exactly where those photos taken. You move the map and we want more Instagram photos to show up but I can't pass the lng and lat variables to instagrams api. This is a bit of a long one, sorry.
Pastebin
can you try this and let me know,
$url=parse_url("http://domain.com/api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117");
$myurl = $url["fragment"];
echo $myurl;
Update, to get individual variables
$url=parse_url("http://domain.com/api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117");
$myurl = $url["fragment"];
echo $myurl.'<br>';
parse_str($myurl);
echo $lng.'<br>';
echo $lat;

Google maps api client side json in javascript

So I am sure that there is a simple solution to my problem but I just can't seem to find an answer. I have an application that has two users place map markers onto a google maps map (and they can see eachothers markers). I want to find the average latitude and longitude and then use the Places API to get JSON that contains nearby locations from that average so the users can decide on a middle ground.
My problem is occurring with getting getting the JSON. Because it is cross domain I can't just use an AJAX call (and the API does not support jsonp). So I was hoping to do this client side in javascript. There are numerous tutorials out there for how to use the Places API when an actual map is on the screen, so how could I do this without the map and just the JSON data?
My application is using JavaScript, JQuery, and Java (a Jersey REST service). I read that there are ways to set up cross domain calls but those all seemed to apply to PHP.
If your application displays Places API data on a map, that map must be provided by Google.
If your application displays Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data. For example, if your application displays a list of places on one tab, and a Google Map with those places on another tab, the first tab must show the "Powered by Google" logo.
The following ZIP file contains the "Powered by Google" logo in the correct sizes for desktop, Android and iOS applications. You may not resize or modify these logos in any way.
Download: powered-by-google.zip
Read here: https://developers.google.com/maps/documentation/javascript/places#LogoRequirements
To use the Places library, just include the library in the API call and give the Places Service an HTML element instead of a map object:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Code:
var request = {
location: new google.maps.LatLng(52.48,-1.89),
radius: '500',
types: ['store']
};
var container = document.getElementById('results');
var service = new google.maps.places.PlacesService(container);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
container.innerHTML += results[i].name + '<br />';
}
}
}
JSFiddle demo

google maps iframe parameters

This is my first time to use google maps iframe and i am lost with these params geocode , fll , fspn , st , rq , ll , spn
all of these params should be equaled with a latitude and longitude .. i have json array retrieve my location of data but i am lost which data should be sent to each param :(
results->geometry->bounds->northeast->lat
results->geometry->bounds->northeast->lng
results->geometry->bounds->southwest->lat
results->geometry->bounds->southwest->lng
results->geometry->location->lat
results->geometry->location->lng
results->geometry->viewport->northeast->lat
results->geometry->viewport->northeast->lng
results->geometry->viewport->southwest->lat
results->geometry->viewport->southwest->lng
This web page has a good explanation of all the parameters:
http://www.seomoz.org/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

json "invalid label" - when parsing google Distance Matrix Request

I'm having hard time with this simple ajax call
function sendreq()
{
$.ajax({
dataType: 'jsonp',
url: 'http://maps.googleapis.com/maps/api/distancematrix/json?origins=Seattle&destinations=San+Francisco&mode=driving&sensor=false',
success: function (jsonp)
{
alert('success');
}
});
}
I'm able to see the api result in json format when i hit the url from browser and seems like jQuery sees the result too but is unable to parse.
it throws an error
invalid label "destination_addresses" : [ "San Francisco, CA, USA" ],
im using jQuery 1.7.1. from ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
any help would be appreciated
thanks.
You can't get Distance Matrix's data by Ajax, because of Same Origin Policy. If you are using Google Distance Matrix API , the only way you can retrieve that data, is from your server-side script. The other method is, you can use Distance Matrix Service. For both methods(API and Service) you have to notice Usage Limits and Requirements:
Use of the Distance Matrix service must relate to the display of
information on a Google Map; for example, to determine
origin-destination pairs that fall within a specific driving time from
one another, before requesting and displaying those destinations on a
map. Use of the service in an application that doesn't display a
Google map is prohibited.
Maybe you need to use the JavaScript API?
http://www.quora.com/Why-doesnt-the-Google-Maps-API-support-JSONP,
http://blog.futtta.be/2010/04/09/no-more-jsonp-for-google-geocoding-webservice

Categories