I have a google.maps.Data layer with a polygon feature:
state = new google.maps.Data();
state.loadGeoJson('static/geojson/ga_state.geojson', {
idPropertyName: 'name'
});
state.setStyle({
clickable: false,
visible: false,
});
state.setMap(map);
Within this feature collection is a polygon representing the state of Georgia:
ga = state.getFeatureById('Georgia')
I can get the geometry of this feature:
gaGeom = ga.getGeometry()
But when I pass either of these objects and also the raw array to google.maps.geometry.polygon.containsFeature(), I get an error that the object does not contain the get() fuction:
google.maps.geometry.poly.containsLocation(p.getPosition(), ga)
Uncaught TypeError: b.get is not a function(…)
google.maps.geometry.poly.containsLocation(p.getPosition(), gaGeom)
Uncaught TypeError: b.get is not a function(…)
google.maps.geometry.poly.containsLocation(p.getPosition(), gaGeom.getArray())
Uncaught TypeError: b.get is not a function(…)
How can I get a google.maps.Data.Polygon to either convert to a google.maps.Polygon or to work with this function?
EDIT:
I have found a way to construct a google.maps.Polygon from a google.maps.Data.Polygon as:
//gaGeom is the feature.geometry from the data layer
poly = new google.maps.Polygon({paths:gaGeom.getAt(0).getArray()})
But surely there has to be a cleaner way to construct the google.maps.Polygon?
The google.maps.geometry.poly.containsLocation method takes a point (a google.maps.LatLng) and a polygon (a google.maps.Polygon).
containsLocation(point:LatLng, polygon:Polygon)
Return Value: boolean
Computes whether the given point lies inside the specified polygon.
ga = state.getFeatureById('Georgia') returns a "feature"
gaGeom = ga.getGeometry() returns a "Geometry"
gaGeom.getArray() returns an "Array" of LinearRings
None of which is a google.maps.Polygon. You can make a google.maps.Polygon from the Array (as I see you have discovered while I wrote this).
proof of concept
code:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var state = new google.maps.Data();
var poly;
state.addListener('addfeature', function(evt) {
if (evt.feature.getId() == "Georgia") {
var ga = state.getFeatureById('Georgia');
var gaGeom = ga.getGeometry();
//gaGeom is the feature.geometry from the data layer
poly = new google.maps.Polygon({
paths: gaGeom.getAt(0).getArray(),
map: map,
clickable: false
});
}
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(evt) {
infoWindow.setPosition(evt.latLng);
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
infoWindow.setContent("INSIDE POLY<br>" + evt.latLng.toUrlValue(6));
} else {
infoWindow.setContent("OUTSIDE POLY<br>" + evt.latLng.toUrlValue(6));
}
infoWindow.open(map);
});
state.loadGeoJson("http://www.geocodezip.com/GeoJSON/gz_2010_us_040_00_500k.json.txt", {
idPropertyName: 'NAME'
});
state.setStyle({
clickable: false,
visible: false,
});
state.setMap(map);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "State of Georgia"
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
Related
I have two hidden fields which contain latitude value values and longitude values having id-#latitude_val and #longitude_val.I will set variable chicago with a initial latitude and longitude.If above two fields are null,I will pass the place name (here statically for checking )and locate the marker by the following code.
function initialize() {
chicago = new google.maps.LatLng(51.508742,-0.120850);//default value
if(($("#latitude_val").val().length >3) || ($("#longitude_val").val().length>3))
{
chicago = new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());
}
else
{
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'Abudhabi'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
console.log(results[0].geometry.location.lat()+' '+results[0].geometry.location.lng());//if null this should print first
chicago = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
console.log('__'+chicago);//this should print second
}
else
{
console.log("Geocode was not successful for the following reason: " + status);
}
});
}
console.log('****'+chicago);//this should print third
var mapOptions = { zoom:4, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var marker=new google.maps.Marker({
position:chicago,
map:map,
draggable:true,
animation: google.maps.Animation.DROP
});
marker.setMap(map);
});
}
I have checked the value of chicago in cases.Here the default value is marked by the marker in the map.When I check console,the third one is printing first,the first one in second and second one in third.I didnt understand why this happens.I need to run this based on the order.
The map is showing with values (51.508742,-0.120850) rather than the new values
So, I guess you might populate said inputs from the backend, and provide a fallback in case they are null. Either way, you want to get a location and only then you want to instance your map.
The following should work:
var map;
function initialize() {
var createMapWithLocation=function(myposition) {
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myposition
},
mymap = new google.maps.Map(document.getElementById("googlemap"), mapOptions),
marker = new google.maps.Marker({
position: myposition,
map: mymap,
draggable: true,
animation: google.maps.Animation.DROP
});
console.log('****' + myposition); //this should print third
return mymap;
};
var chicago = new google.maps.LatLng(51.508742, -0.120850); //default value
if (($("#latitude_val").val().length > 3) || ($("#longitude_val").val().length > 3)) {
chicago = new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());
map = createMapWithLocation(chicago);
} else {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': 'Abudhabi'
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location.lat() + ' ' + results[0].geometry.location.lng()); //if null this should print first
chicago = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
console.log('__' + chicago); //this should print second
map = createMapWithLocation(chicago);
} else {
console.log("Geocode was not successful for the following reason: " + status);
}
});
}
}
You decide when to call createMapWithLocation. It will be synchronous if the inputs are populated, and asynchronous if they aren't. Either way, you don't need to know the position of chicago beforehand.
Please note I've declared map outside of the initialize function, just in case you want to inspect it from the console.
Well I'm having this problem, load the map once and everything works perfect. The second time or once update the map does not load ok, but not centered load when navigating on you can see the marks that are made but is deformed or simply lost.
I have tried several ways to solve this problem, first and most common I found was to use google.maps.event.trigger(map 'resize') but it did not work then and logic, try that whenever loading map is executed, create a new map, with the same data and focused but neither worked for me. It may be also the way I use the map. I am using the plugin of the camera in my application, the user takes a photo and this should detect where I draw the picture and display the map. Each time the view is opened, the plug of the camera, in the process of taking and show the picture is where I call the appropriate functions to load the map and this has me a bit tricky immediately loaded I have a good time locked in this problem, I found solutions serve me but only for the browser, the device does not work. I am using ionic framework and plugins cordova.
Controller :
.controller("CamaraCtrl", function($scope,$rootScope, Camera,$cordovaGeolocation,$state,$location,$ionicSideMenuDelegate) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var latitud_actual = position.coords.latitude
var longitud_actual = position.coords.longitude
$scope.latitud = latitud_actual;
$scope.longitud = longitud_actual;
//$scope.map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
}, function(err) {
// error
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng($scope.latitud, $scope.longitud),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
$scope.map = map;
}
$scope.setMarker = function(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title
};
marker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
$scope.mostrar_form = false;
$scope.mostrar_boton_view = false;
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.lastPhoto = imageURI;
$scope.mostrar_form = true;
$scope.mostrar_boton_view = false;
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
}, function() {
$scope.mostrar_boton_view = true;
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: false
});
};
$scope.getPhoto();
})
The only solution I found was to create a function that executes the map again. It should not be as optimal but at least it solved my problem.
$scope.centrar = function(){
var mapOptions = {
center: new google.maps.LatLng($scope.latitud, $scope.longitud),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
$scope.map = map;
}
Thanks in advance for any help you can provide! I'm trying to create markers in my Google Map using JSON data. The good news is that I've got the data in the format I need it. The bad news is that I'm new to JSON, and I can't seem to get the markers to show up on the map. From the console's response, the issue seems to be the mapInit line at the bottom of the code below.
I have tried resolving this problem by reviewing solutions at different markers on google maps v3, Using JSON markers in Google Maps API with Javascript, and Google Maps API v3: Adding markers from an array doesn't work, among others. I've also tried duplicating the examples at http://weareallrobots.com/demos/map.html and other sites, but I'm still having trouble.
My code:
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
// HERE'S WHERE PROBLEMS START
$.getJSON("mapall.js", {}, function(data){
$.each(data.masterlocation, function(i, item){
$("#markers").append('<li>' + item.nickname + '</li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.latitude, item.longitude),
map: map_canvas,
title: item.nickname
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>"+ item.nickname +"</h3>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
});
}
function calcRoute() {
UNRELATED ROUTING CODE HERE
}
// HERE'S WHERE MORE PROBLEMS START
$(function(){
// initialize map (create markers, infowindows and list)
mapInit();
// "live" bind click event
$("#markers a").live("click", function(){
var i = $(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
//for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});
</script>
My JSON Data
[{"masterlocation":{"latitude":"33.5","nickname":"First","longitude":"-86.8"}},{"masterlocation":{"latitude":"34.7","nickname":"Second","longitude":"-86.6"}},
UPDATE 1
As per comments from geocodezip and Adam, I've updated my code to the below. I added the + symbol before latitude and longitude, and I replaced mapInit with initialize. However, I'm still not getting any markers to show up. Firebug is telling me that I have errors in my jQuery file, but I'm not sure if these are related. Thanks for sticking with me!
Code:
// HERE'S WHERE PROBLEMS START
$.getJSON("mapall.js", {}, function(data){
$.each(data.masterlocation, function(i, item){
$("#markers").append('<li>' + item.nickname + '</li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+item.latitude, +item.longitude),
map: map_canvas,
title: item.nickname
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>"+ item.nickname +"</h3>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
});
}
function calcRoute() {
UNRELATED ROUTING CODE HERE
}
// HERE'S WHERE MORE PROBLEMS START
$(function(){
// initialize map (create markers, infowindows and list)
initialize();
// "live" bind click event
$("#markers a").live("click", function(){
var i = $(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
//for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});
JQuery errors
TypeError: a is undefined
[Break On This Error]
...rn a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){...
jquery.js (line 29)
TypeError: a is undefined
[Break On This Error]
...rn a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){...
UPDATE 2
My current code is below, as well as the error codes I am getting in the console. New errors appeared when I reloaded the page, and they refer to the line in my javascript where function initialize first occurs. Maybe this is the problem?
Also, is it possible that the problem is in the JSON? Each JSON entry is preceded by the name of the MYSQL table, "Masterlocation" (see above.) In other JSON examples I've seen, the term that comes after the "." in "$.each(data.masterlocation)" only occurs once.
My Javascript:
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
$.getJSON("mapall.js", {}, function(data){
console.log(data);
$.each(data.masterlocation, function(i, item){
console.log(item);
$("#markers").append('<li>' + item.nickname + '</li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+item.latitude, +item.longitude),
map: map,
title: item.nickname
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>"+ item.nickname +"</h3>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
});
}
function calcRoute() {
ROUTING CODE
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
}
$(function(){
// initialize map (create markers, infowindows and list)
initialize();
// "live" bind click event
$("#markers a").live("click", function(){
var i = $(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
//for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});
</script>
Javascript Errors from Console: these only occurred after I reloaded the page.
Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:29
c.extend.each jquery.js:29
(anonymous function) mapall:87
b jquery.js:121
w.onreadystatechange jquery.js:127
Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:29
c.extend.each jquery.js:29
(anonymous function) mapall:87
b jquery.js:121
w.onreadystatechange jquery.js:127
In addition to any other errors, the way you're accessing the JSON data doesn't match the format of that data.
Your code to access the JSON data is:
$.getJSON( "mapall.js", {}, function( data ) {
$.each( data.masterlocation, function( i, item ) {
... use item.nickname, item.latitude, and item.longitude here
});
});
Now there's nothing wrong with that code, if the JSON data looked like this:
{
"masterlocation": [
{
"nickname": "First",
"latitude": 33.5,
"longitude": -86.8
},
{
"nickname": "Second",
"latitude": 34.7,
"longitude": -86.6
}
]
}
This JSON data is an object with a single property named masterlocation. That property is an array of objects, each one containing nickname, a string, and latitude and longitude, two numbers.
That's a pretty sensible way to lay out the JSON data. I would do it just about the same myself. (The only things I can think of changing would be the naming conventions: I'd probably use a name like locations instead of masterlocation because I like to see plural names for arrays, and I like shorter names for commonly-used properties, e.g. name, lat, and lng. But that's purely a matter of style—the structure I'd use is identical aside for names.)
Unfortunately, your actual JSON data looks like this:
[
{
"masterlocation": {
"latitude": "33.5",
"nickname": "First",
"longitude": "-86.8"
}
},
{
"masterlocation": {
"latitude": "34.7",
"nickname": "Second",
"longitude": "-86.6"
}
}
]
This is an array of two elements. Each element is an object with one property named masterlocation. Each masterlocation object contains the nickname, latitude, and longitude properties. And the latitude and longitude are strings instead of numbers like they should be.
It would be easy enough to change your code to work with this structure:
$.getJSON( "mapall.js", {}, function( data ) {
$.each( data, function( i, item ) {
var loc = item.masterlocation;
... use loc.nickname, +loc.latitude, and +loc.longitude here
});
});
But if you have the option of changing the format of your JSON format, I'd do that instead. You had the right idea in your JavaScript code, just change the JSON output to match.
Make sure the latitude and longitude are actually numbers in JS, not strings.
To do a type convert, just put a + in front of the string
position: new google.maps.LatLng(+item.latitude, +item.longitude)
For some reason, google's API was not built smart enough to handle passing in strings containing numbers....go figure.
EDIT
Ditto to the comment on your post as well - you are calling a function mapInit() but you should be calling the function initialize() from the looks of it.
EDIT2
This line:
map: map_canvas,
should be
map: map,
I'm developing an application with VB.NET and Google Maps v3 and trying create a map with these properties:
<script type="text/javascript">
$(document).ready(function (){
var sPath ="images/AppIcons/Vehicles/icon05.png,";
var markers= new google.maps.Marker({
position : new google.maps.LatLng(4.759915, -74.04083),
map : map,
icon : new google.maps.MarkerImage(+ sPath + null, null, null, new google.maps.Size(32, 32)),
animation: google.maps.Animation.DROP,
title : "buena"
});
var myLatlng = new google.maps.LatLng(0, 0);
var mapOptions={zoom: 3,center: new google.maps.LatLng(4.590798,-74.084244),mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = setMarkers(map);
var infowindow = new google.maps.InfoWindow({Content : '<b>FM3200 - FM3200</b><div><font size=1> </font></div><div><u>20/01/2013 04:30:56 p.m. - Voltaje Externo - (Norte)</u></div>Ubicacion Invalida In1:0 In2:0 In3:0 Batext:4.45V Vel:0 Odom:0 Ibutton:0 Oficina Principal Risk, Kmh: 0'});
if (markers !='') {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
/*if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}*/
});
}
});
function setMarkers(map,markers) {
var marker =markers;
if (marker !='') {
return marker;
}
}</script>
When I run this code, this error message appears:
Uncaught TypeError: Cannot read property '__e3_' of undefined main.js:18
How can I solve this error?
Move the creation of map to the top of the function.
Currently you use map as map-option for markers, where it's expected to be a google.maps.Map-instance(but it's undefined, because the map isn't created yet)
When calling autocomplete.getPlace(), the PlaceResult object that is returned is now missing formatted_phone_number, international_phone_number, rating, and website properties. When I do a console.log of the place object this is what is returned:
Object
address_components: Array[8]
formatted_address: "Google Sydney, 5/48 Pirrama Rd, Pyrmont NSW 2009, Australia"
geometry: Object
html_attributions: Array[0]
icon: "http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png"
id: "20074bf275d0d9476ed98e17445c8c19531e0c20"
name: "Google Sydney"
reference: "CnRlAAAASdbJCc7CCRHiL1gb7Z7BwJ9dLXhM16AexHOmugvvuC9t4o_RqKpgrq57CkIjS_YO7iCHtmypMjOFCkhc4zBGF882PHQW4Bv2rHEvePPfIrjWxT4VjYF7N-5SveVoPT7xe-jfWzH7YZDWeDxKyYFE2xIQJQb58Lr_dkmCmYVATfeObBoU1SmGG30mBXMR4TavRMo9XZNX8L4"
types: Array[2]
url: "http://maps.google.com/maps/place?ftid=0x6b12ae37b47f5b37:0x8eaddfcd1b32ca52"
vicinity: "Pyrmont"
__proto__: Object
Notice how the properties mentioned above in the Placeresult are no longer there. These properties were definitely showing in a Placeresult from an autocomplete.getPlace() call last week or so. Placeresult objects from a service.getDetails() are correctly returning all the properties mentioned in the Places V3 API, however a .getPlace() call is now missing these attributes despite referencing the same Placeresult. Any idea why these properties are now missing?
code:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
console.log(place);
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {w
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
The Places-API is still experimental, so when you say last week you got the phone-numbers it may be that they changed something.
But however, you're right, what you get is a placeSearchResponse and not a placeDetailsResponse(what ist should be).