LatLng from Google Maps Polygon getPath() - google-maps-api-3

Based on the Google Maps JavaScript API v3 documentation, google.maps.Polygon class's getPath() function returns an MVCArray. In a straightforward case, a Polygon's path can be a single array of LatLngs that are converted to the MVCArray type upon being passed into the google.maps.Polygon class's setPath() function.
The above case is what I'm dealing with currently. I pass in an array of LatLngs, and return (what I assume is) an MVCObject when I call getPath() on my Polygon object. My question is: How do I convert this MVCObject back into a single array of LatLngs that form the Polygon's shape? Is there some built in Google Maps API v3 way that I'm missing? I feel like there has to be some sort of obvious built in conversion function or something in the API that's eluding me.
Any help would be appreciated.

When you call Polygon.getPath()api-doc, the return is an MVCArrayapi-doc of LatLng instances that represent the first path of the Polygon. You can directly get to the members of the MVCAarray in two ways:
Call MVCAarray.getArray, which will return the underlying JavaScript Array that contains LatLng members.
Use MVCArray.getAt( index ), which will return whatever is at that index in the MVCArray (a LatLng in this case). This provides you a way to setup a JavaScript for loop to iterate over the members of the array.
You can also indirectly work with the members of the MVCArray by using the forEach(callback:function(*, number)) function. In this case, you must pass a callback function that accepts two parameters:
The actual member element of the MVCArray.
The array index where that element is located.

var polygonBounds = polygon.getPath();
var bounds = [];
for (var i = 0; i < polygonBounds.length; i++) {
var point = {
lat: polygonBounds.getAt(i).lat(),
lng: polygonBounds.getAt(i).lng()
};
bounds.push(point);
}

Related

Populating Array Data from Data Layer into GTM

I have a Data Layer that is giving me information like this from Drupal
dataLayer = [{
"entityType":"node",
"entityBundle":"article",
"entityTaxonomy":
{"funnel_path":{"2":"Find a Park"},
"byline":{"4":"Name1","5":"Name2"}},"drupalLanguage":"en",
"userUid":"1"}
];
</script>
I can easily use GTM's Data Layer variable to pull in entityBundle. How do I set it to pull in the information in byline? I tried entityTaxonomy.byline, but that give me an array. I can set to do entityTaxonomy.byline.4 to get Name1, but that would be silly since the editors would be regularly adding things.
I am planning to add the byline, ultimately, into Custom Dimension 2 in Google Analytics.
I am looking to have the data that goes to Custom Dimension 2 to be Name1, Name2 . Sometimes this will be just one value. Sometimes it can be up to 20 values.
What do I need to do in GTM to get it to register that information?
entityTaxonomy.byline actually gives you an object. You would need to do a bit of processing to get an array that you can join into a string. One possible way would be
temp = [];
Object.keys(test.entityTaxonomy.byline).map(function(key, index) {
temp.push(test.entityTaxonomy.byline[key]);
});
bylines = temp.join(",")
(I'm sure that could be done much more concise). In GTM you would need to create a variable that contains the objects with the bylines, then you could do the processing in a custom javascript variable (which is by definition an anonymous function with a return value)
function() {
var byLineObject = {{bylines}} // created as datalayer var beforehand
temp = [];
Object.keys(byLineObject).map(function(key, index) {
temp.push(byLineObject[key]);
});
return temp.join(",")
}

Getting the reference from $firebaseArray to make a new reference object

Related to this question, I need to be able to get an element from a collection as a Firebase reference, ie given a $firebaseArray I need a $firebaseObject pointing to one of its elements. Unlike that example, I can't just hard-code a path the array and take a child from there because the location of the array will vary. And I can't use $firebaseArray.$getRecord() or the object provided by my ng-repeat followed by array.$save() because I may need to do a push() on this element.
So I settled on this reusable approach:
In a service:
function selectElement(array, element) {
var obj = $firebaseObject(array.$ref().child(element.$id));
return obj;
}
In the controller:
function onItemClicked(e) {
vm.selected = dataservice.selectElement(vm.observations, e);
}
In the template:
<div class="list-item" ng-repeat="o in vm.observations" ng-click="vm.onItemClicked(o)">
The first line of selectElement produces an error: array.$ref(...).child is not a function at Object.selectElement
Here array has all the properties you'd expect, but logging array.$ref() shows this obfuscated object:
Y {k: Ji, path: P, n: Ce, pc: true}
That is what it looks like from the time the array is created. What's going on here and how do I use this reference? Is there another way to get a working Firebase object out of an array?

Google Places API: How to use multiple types?

I need a POI API that returns ratings, photos, opening/closing times, etc and I thought Google Places API seemed to do what I want, but I am having some trouble with filtering: I want to use the autocomplete feature with multiple types for filtering.
Here is what I have:
var map;
var selectAttractionAutocomplete;
var selectCityAutocompleteOptions = {
types: ['(cities)']
};
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-33.8665433, 151.1956316),
zoom: 15
});
var inputsearchedCity = document.getElementById('input-searched-city');
selectCityAutocomplete = new google.maps.places.Autocomplete(inputsearchedCity, selectCityAutocompleteOptions);
selectCityAutocomplete.bindTo('bounds', map);
google.maps.event.addListener(selectCityAutocomplete, 'place_changed', function () {
console.log(selectCityAutocomplete.getPlace());
});
How can I use multiple types?
I have tried pipes, commas, brackets... nothing works:
var selectCityAutocompleteOptions = {
types: ['cities|point_of_interest']
};
If your are using in a query string, use the | separator. Remember that only 'geocode|establishment' is currently valid as a collection type, which is the same than not specifying any combined type.
See:
https://developers.google.com/places/web-service/autocomplete#place_types
You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter. The parameter specifies a type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types.
According to Google Documentation, point_of_interestis of type 2, which are not supported in the types filter of a place search, or in the types property when adding a place.
This question is partly answered in this thread.
First, the place type of "cities" it not supported. You can find a list of supported place types here.
There is no way to use multiple types at once. However, you can call the API twice in order to get similar results. For example:
var selectCityAutocompleteOptions1 = {
types: ['zoo']
};
var selectCityAutocompleteOptions2 = {
types: ['museum']
};
Based off of your description, though, it sounds like you want all points of interest results, without filtering by type. In that case you might want to use a Find Place Requests Place Search instead.
Encountered this recently. Answer is here Google Places Auto-Complete
types, which can either specify one of two explicit types or one of two type collections.
var request = {
bounds: map.getBounds(),
types: ['bar','park']
//keyword: 'best view'
};

'item.geometry.location.kb' and 'item.geometry.location.jb' returning undefined

I'm using Google Maps to get an autocomplete list of cities.
I used to use item.geometry.location.kb as the longitude and item.geometry.location.jb as the latitude, but they are not defined since today/yesterday.
Apparently, one has to use item.geometry.location.lng() and .lat() instead.
I didn't know that and I have an app using item.geometry.location.kb and jb in Google Play and the AppĀ Store.
So my apps are not working any more.
Why has a change has been made and how can I revert to kb and jb?
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
var item = autocomplete.getPlace();
curLon = item.geometry.location.kb;
curLat = item.geometry.location.jb;
// ...
Don't use undocumented properties of the Google APIs. They can and do change with every release.
geometry.location is a google.maps.LatLng object, and the documented methods to get latitude and longitude are .lat() and .lng().

Render google maps link as polyline

I want to display a couple of routes on a map, but I would prefer to first draw them with google maps. For example, I got directions from Seattle to San Diego, then moved things a bit, and the link looks like this.
I know that I can use the DirectionsRenderer to draw a polyline connecting Seattle and San Diego like this:
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(gMap);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.BICYCLING
}, function(result) {
renderDirections(result);
});
}
requestDirections('Seattle, WA', 'San Diego, CA');
What I would like to know is if there is a way to pass in the link as the directions request. The link contains waypoints, my modifications to the default route.
It is possible and you are on the right track. It is hard to understand the API. I believe that you have to set the waypoints in the DirectionRequest object of the DirectionsService when you call the route method. I don't think you can pass in a link, but you can create an object or Array of waypoints first.
If you want, you can also specify the optimizeWaypoints boolean.
Check out the DirectionsRequest Object.
waypoints Array. Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array. Optional.
Yes, you can use the DirectionsRenderer so long as you pass your start and end points into a DirectionsRequest, and pass that into a DirectionsService object. Once you call .setDirections it'll draw the polyline for you. From the API documentation at.
Set the renderer to use the result from the DirectionsService. Setting a valid set of directions in this manner will display the directions on the renderer's designated map and panel.
If what you were getting at was drawing the polyline yourself (though I don't see why it would be necessary), the individual points in the path can be derived -- DirectionsResult contains an array of DirectionsLegs which contains an array of DirectionsSteps which contains a .path property, which is an array of latlngs. (whew!)

Resources