We Keep Coding

Google Maps Places Autocomplete missing geometry

The Google Maps Places Autocomplete does not work as expected anymore.
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
When inserting a search string in the map (for example "ZKM"), it will give some recommendations in the drop down list. In this case it will be "ZKM | Zentrum für Kunst und Medientechnologie Karlsruhe, Lorenzstraße, Karlsruhe, Deutschland". When clicking this item, no marker will be placed on the map!
But when searching for "Karlsruhe" and clicking the first search result "Karlsruhe, Deutschland" the marker is placed correctly.
In the code a function called getPlace() ist called.
var place = autocomplete.getPlace();
The place should contain an object "geometry", but it does not.
Is there any workaround for this problem?

Please be sure you set 'geometry' field in autocomplete like this:
autocomplete.setFields(['address_component', 'geometry']);

Take a look at the beginning of the function:
if (!place.geometry) {
return;
}
A PlaceResult may, but must not have a geometry-property.
To clarify how the autocomplete works:
when you type something, the API will request the predictions(to populate the dropdown). Only when you select a place from the dropdown it requests the data(including the geometry) for the particular place.
Obviously there are inconsistencies of the used data(the API shouldn't suggest a place where no informations are accessible), but that's how it is, it may happen that you get a prediction without a place.
Workaround: AFAIK no

Looks like it has been fixed by Google :)

Yes, the place contains an object "geometry".
To find this, you should use this :
autocomplete.getPlace().geometry.location.lat() //for the latitude
autocomplete.getPlace().geometry.location.lng() //for the longitude

Creating Dynamic marker groups in Leaflet maps

layers.group3 = new L.MarkerClusterGroup();
layers.group3.clearLayers();
map.addLayer(layers.group3);
Also i first need to check if the layer already exists when i call the method again to add/remove markers it seems the hasLayer is not working

like for example "map.addLayer(markers, "group1markers")" ????
No: Leaflet doesn't support naming layers in that way, regardless of what plugin you use: the key is using variables correctly. You can keep your own index of layers, though, like:
var layers = {};
layers.group1markers = group1markers;
map.addLayer(markers);
Likewise, hasLayer, as in the Leaflet documentation takes a layer object as an argument, not a variable name as a string.

Google Maps - Saving a dynamic map

I'm attempting to create a dynamic map using the latest Google Map API. Everything is going smooth so far. I do have a question of course:
How would I/you go about saving my current map?
Let's say you build a map with dynamic markers: Since everything is done via JavaScript, I need to get/set those values from a file/database.
I was thinking about outputting the entire google.map.Markers as a JSON and send it to a database as a string, but then if I have around 100 places, I'm not sure how well it would go and I'm worried about efficiency.
Is this the only way to do it and am I thinking properly? Basically your website users are allowed to place a marker on the map, which then are subject to confirmation of course. Once it's confirmed, that marker must be in the latest "version" of the map, so I must get that info from/into a database/file.
Thanks in advance!

I'm creating similar application and I implemented it this way:
I have a Marker table which has columns for each attribute that I'm using in markers (e.g. latitude, longitude, name, description, type, etc.) When someone adds a marker I'm just saving the attributes of the marker to the database. Next time I want to show the marker I'm just getting the attributes from database, encode them to JSON and attach to the page. Inside page I have the JS that grabs those attributes and creates the markers inside the map. Pseudocode:
//this is generated dynamically from DB.
var markers = [
{lat:115416,lng:26411},
{lat:115416,lng:26411}
];
//this is static, just grabs the dynamic bit and puts it on the map:
for (var i = 0; i < markers.length; i++){
//creates a marker object
var marker = new Marker({lat:markers[i].lat, lng:markers[i].lng })
//displays it on the map
map.addMarker(marker);
}
the benefit of this is that your data in the database is independent from map implementation, e.g. if in the future you decide to move to apple maps and it has different implementation you can just write different JS to handle the data. Also you can query over it, e.g. you can query for places that are close by looking at lat and lang, etc..

How to dynamically change a google maps marker after its added

Using the google maps API (v3) I can successfully add an array of markers to the map using custom icons.
Each marker represents a destination and I want to change the icon image when the respective destination name is mouse'd over elsewhere on the page.
I can add the event listener to pick up the mouse over, and I know I can use marker.setIcon("imgurl") to change the icon, however what I can't figure out is how to reference the specific marker to be changed?
I've read that I can add an "id" when defining the marker, however I can't figure out how to use this is conjunction with marker.seticon to update that specific marker.
Thanks for your help.

If you have ID numbers for each destination, keep an array of the markers indexed by your destination.
For example,
var myMarkers = []
for(var i = 0; i < destinations.length; i++) {
myMarkers[destination[i].id] = new google.maps.Marker(markerOpts)
}
and in your destination links elsewhere:
onclick = function() {
myMarkers[destinationID].setIcon(otherIcon)
}

I typically create an array called markersArray. Then I name each marker marker_1, marker_2, etc. using a for loop. After each one is created, I push it to the markersArray. Now you can reference each marker using markersArray[i].

How do I store more information in a marker?

I'm using Google Maps v3 and I build in the server side a json collection of location data. So when I receive that, I iterate through that collection and create a marker object for each and every one of them.
For each of these markers, I bind them with the click event, so when the user clicks on a marker in the map, it displays an infoWindow with data related to the associated location.
I have an array to store all the location got from the server that holds the retrieved json objects and their corresponding marker.
The problem is that, even when I have an array that I can reference or iterate through, I need to not only get the marker object when the user clicks on them, but also the location object, that stores more information.
I tried to mantain this array of objects and reference it from the calling object without success, because the function is called by the marker and not the location object. So I thought if it's possible to store more information in the google maps marker object like using a general purpose field.
Please let me know if more information is needed.
Thanks!

Yes you can, thanks to JavaScript. In this language, objects and hashtables are the same thing1.
This is how you are creating your marker:
var point = new google.maps.LatLng(40.70, -74.00);
var myMarker = new google.maps.Marker({ position: point, map: map });
And this is how you can add an additional property to your myMarker object:
myMarker.myNewField = 100;
Voila! No need to hold separate arrays of related data. No need of a general purpose field. Simply invent a new property name, and you're good to go.
1 A Survey of the JavaScript Programming Language by Douglas Crockford.