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.
Related
I am trying to get data, like phone numbers, from a Place Details Request using The Google Places API Web Service. I am unable to get response data that is similar to the one shown in this guide, even though I'm getting the place id from the same address.
The place id I get is different from the one in the guide. My place id is 'ChIJ8UadyjeuEmsRDt5QbiDg720' and theirs is 'ChIJN1t_tDeuEmsRUsoyG83frY4'. If I use their place id I get all the data I need.
The only data I can get are: address_components, adr_address, formatted_address, geometry, icon, id, name, place_id, reference, scope, types, url, and vicinity. How can I get data like a phone number from a request?
var placesRequest = $http({
method: "post",
url: "https://maps.googleapis.com/maps/api/place/details/json?placeid=" + <my place id>+"&key=<my key>"
});
placesRequest.success(function (data) {
console.log("data", data);
});
Same problem with Google Maps JavaScript API using this code.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.866, lng: 151.196},
zoom: 15
});
google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: $scope.newUserData.address.place_id
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
if(place) {
console.log("place", place);
}
}
});
}
initMap();
The phone number is missing in the Google Places API because Google Maps doesn't have a phone number for that particular place. If you request the details for a place with a phone number on Google Maps, it will be returned.
Take a closer look at ChIJ8UadyjeuEmsRDt5QbiDg720. It's an office building called "Workplace 6" — notice that the details say it is of type premise. If you visit the Google Maps URL in the url field (https://maps.google.com/?q=Workplace+6&ftid=0x6b12ae37ca9d46f1:0x6defe0206e50de0e) you'll notice there's no phone number listed there either.
The other Place ID, ChIJN1t_tDeuEmsRUsoyG83frY4, is for one of the businesses located inside that building (Google). If you compare the address_components or formatted_address you'll see they don't have quite the same address (Google's address is floor 5 of that building).
In general, any field of a place might be absent. This happens if Google Maps doesn't know it, or if it simply doesn't apply (e.g. you won't find opening_hours on France). As the documentation for Place Details Results say:
Each result may contain the following fields:
[Emphasis mine.]
Trying to create a heatmap by States and I'm basing my map on this sample:
https://google-developers.appspot.com/maps/documentation/javascript/examples/full/layer-heatmap
but I got a quick question, is it possible to provide google maps api with a state entry instead of coordinates? For example:
Instead of:
new google.maps.LatLng(37.765172, -122.417556),
new google.maps.LatLng(37.765164, -122.418075),
I would have something like...
new google.maps.state("NY"),
new google.maps.state("NJ"), etc.
You would have to geocode the addresses first and use the return value as input to the new.google.maps.latLng method. You could use the Google Geocode service to streamline the process. The class to use is: google.maps.Geocoder().
edit: I actually dug up an old script I used a while ago. I used pygeocoder for it. See below for a subset of it
import sys
from pygeocoder import Geocoder
from pygeocoder import Geocoder,GeocoderError
addressList = ["553 Main St, Toronto, On", "2 Black Creek Dr, Toronto, On"]
geocodedList = []
for item in addressList:
result = Geocoder.geocode(item)
coordinates = str(result[0].coordinates)
geocodedList.append(coordinates) #from here, parse out x and y
I gave a look to instafeed.js. It works good right away, I followed the first docs and got a 20 images sample displaying at web page.
However I really need to obtain pictures from a certain place (city, in my case). Working with Twitter API I used to look for the WOEID for the wanted place. Here it seems to be quite similar.
I read Instagram docs:
DISTANCE Default is 1000m (distance=1000), max distance is 5000.
FACEBOOK_PLACES_ID Returns a location mapped off of a Facebook places id. If used, a Foursquare id and lat, lng are not required.
FOURSQUARE_ID Returns a location mapped off of a foursquare v1 api location id. If used, you are not required to use lat and lng. Note that this method is deprecated; you should use the new foursquare IDs with V2 of their API.
LAT Latitude of the center search coordinate. If used, lng is required.
LNG Longitude of the center search coordinate. If used, lat is required.
FOURSQUARE_V2_ID Returns a location mapped off of a foursquare v2 api location id. If used, you are not required to use lat and lng.
But where the hell can I obtain such ID's for a city. Let's say I want pictures tagged with dinner at Puebla, Mexico. What should I do.
I used this nice site to get an ID from my coordinates: http://maihamakyo.org/etc/locastagram/index.php
Tried this Java Script code then:
var feed = new Instafeed({
get: 'tagged',
location: '46016173',
tagName: 'CLEU',
clientId: '***'
})
feed.run();
but got not the expected result.
As of version 1.3, you can add a filter function to Instafeed.js, to exclude images from the results.
So you should be able to set get: "location", and your locationId, and then filter out any images that don't contain the tag you're looking for:
var feed = new Instafeed({
get: 'location',
locationId: LOC_ID,
// other settings omitted for example
filter: function(image) {
return image.tags.indexOf('TAG_NAME') >= 0;
}
});
feed.run();
Update
The image parameter that gets passed to the filter function is the image data straight from Instagram's API. So you can filter on any criteria you want. Just make sure the function returns true or false:
filter: function(image) {
if (image.tags.indexOf('TAG_NAME') >= 0 && image.filter === "Normal") {
return true;
}
return false;
}
To get an idea of what properties that image object has, check this thread on GitHub.
Looking at the instafeed.js documentation, the option name/key for location should be locationId.
I'm not familiar with the Instagram API, but the instafeed.js documentation hints heavily that get needs to be set to location to use a location ID. So it is very possible you can only search for a tag, or a location, but not both.
Has anyone noticed that google maps geocoding have changed the variable name of the lat and lng from, Qa and Ra to Pa and Qa.
Does anyone know a reason for this?
Edit: If you're using the Google Maps Geocoding Service, as #hamczu suggests, then you should be getting the results like this:
{
... snip ...
geometry: {
location: LatLng,
... snip ...
}
}
It sounds like you're not using the API methods for the LatLng object, but are instead trying to use its undocumented properties. Your question demonstrates one of the best reasons why this is a Bad Idea - the Google code is compressed and obfuscated, using short, arbitrary variable and property names, and Google may recompress its code at any time, arbitrarily changing these names. What it won't change is the function and attribute names in the published API - that's the whole point of having an API to begin with, and the reason why developers should code against the API, not the "undocumented features" of the currently available code.
So the best approach is to use the documented methods:
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
Otherwise, your code will likely break every time Google recompresses its code.
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