Hi,I work for a charity org and they have an app that needs some TLC. It looks fairly simple and is used to put points on a map, then do the usual directions from here to it…
for example can I replace the current click event, with my own so i can utilize the places api to display additional informationI generated a test app with the maps object, is it possible to add additional google api code for bringing up the “hours” information, and also doing the directions thing? so when I click or touch the POI, it returns the hours of operation and other items of interest…as well it would be nice if this can all be done within the phpmaker appthanks
You may refer to to the Google Maps Platform. Google maps is only an extension in PHPMaker, you may customize it yourself to support what the Google Maps Platform supports.
thanks,where would you recommend that the code be placed to extend the existing map object ? is the generated code accessible to extend or would you have to create a new “map object” to extend the features.so for example the google samples show the typical function:
function initMap() {
..
}
would I add that to my list page as well, or would this interfere with the phpmaker generated code.
what we need to do is on the marker “tooltip” or description window, we would like to show the hours of operation and hopefully if we can add where the person is currently (marker) and then display a edit box possible to help the user navigate to the closets points to themthanks,
what we need to do is on the marker “tooltip” or description window, we would like to show the hours of operation and hopefully if we can add where the person is currently (marker) and then display a edit box possible to help the user navigate to the closets points to them >
How you get the info about “help the user navigate to the closets points to them”? You need to find out which Google API you need, e.g. you may need Routes API.
Then you can put the info into the marker description window, you may add your listener in Client/Startup Script to customize the map, e.g.
$(document).on("map", (e, args) => {
console(args); // View the arguments first, it contains all info about the map
// your code to customize the map
});
thanks.what I ended up doing is creating a function that the user call select from the list page options menu “Sync this place…” – it goes out and gets all the required information about the place. it then ends up updating the record in the table, so the markers are displaying exactly the designed content that I created – so this worked out a little easier than expected.When the user enters a record, they need to specify either or all of these items - the place id, business name and address - the function will then attempt to locate the POI and return the content.I asked my colleague to show me the existing app again to review how the data is entered. – very manual process. the form has a google autocomplete editbox that he can type in what ever information he has about the site and have the autocomplete return the complete address - albeit he hasto copy and paste the return values manually.I’m trying to mimic this, and have some success incorporating the google autocomplete widget on my add form - but it errors out… i am trying to use this code from: github.com/lewagon/google-place-autocomplete
fairly simplei’m trying to add the code from “index.html” (just the edit box) code to the add form via the pageDataRenderinig()
i add the edit box to the top of the form… displays no problem
then in the form’s add page startup script , i added the JS code…
loadjs.ready("load", function () {
// Write your table-specific startup script here, no need to add script tags.
function initializeAutocomplete(id) {
var element = document.getElementById(id);
if (element) {
const options = {
componentRestrictions: { country: "ca" }
};
var autocomplete = new google.maps.places.Autocomplete(element, options);
google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
}
}
function onPlaceChanged() {
var place = this.getPlace();
// gets the data
for (var i in place.address_components) {
var component = place.address_components[i];
for (var j in component.types) { // Some types are ["country", "political"]
var type_element = document.getElementById(component.types[j]);
if (type_element) {
type_element.value = component.long_name;
}
}
}
}
});
google.maps.event.addDomListener(window, 'load', function() {
initializeAutocomplete('user_input_autocomplete_address');
});
this is where I’m struggling to initialize/incorporate the map object as it errors with:Uncaught ReferenceError: google is not defined
at poilocationsadd:1027:1obviously its this code…
Hi,thanks for your time.so after debugging i can see that the PHPM map object is available on the add form and i don’t need to create anther map object?Availible:
ew.maps
google
google.maps
google.maps.event
so I believe it should be quiet simple to utilize the phpm objects…i’ve redone the code as follows:
the html edit box element “user_input_autocomplete_address” is valid and found.
loadjs.ready("load", function () {
// startup script
var element = document.getElementById("user_input_autocomplete_address");
if (element) {
const options = {
componentRestrictions: { country: "ca" } // just Canada
};
var autocomplete = new google.maps.places.Autocomplete(element, options);
google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
}
});
function onPlaceChanged() {
var place = this.getPlace();
console.log(place);
for (var i in place.address_components) {
var component = place.address_components[i];
for (var j in component.types) {
var type_element = document.getElementById(component.types[j]);
if (type_element) {
type_element.value = component.long_name;
}
}
}
}
from the google places api and the sample i was referencing, I see additional parameters being sent: libraries=placessrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY**&libraries=places**&callback=initMapwhen I add that to the PHPM ew.ready(“markerjs”) call… the autocomplete code worked!!is there somewhere that this can be added so it doesn’t get wiped after code regeneration?thanks for you help
Hi,in this function, we are trying to simply assign a JS array to the form textarea field, but it does not get populated, but outside of this function it gets populated
loadjs.ready("load", function () {
type_element = document.getElementById("x_poi_Opening_Hours");
type_element.value = place.opening_hours.weekday_text.toString();
// OR
type_element.innertext= place.opening_hours.weekday_text.toString();
});
does not set the textarea content. place.opening_hours.weekday_text is an array
regular text edit boxes are being filled correctly, its just textareabut the same field outside of this displays correctly with sample data
You noted to add the following code to wait for the libraries to load, but it does not fire, so the above code is working at times, when you load the page the google object is not available, if you refresh the page it loads the code
loadjs.ready("googlemaps", function() {
// your code
});
i tried a few iterations of this but it doesn’t appear to work, as well is this needed if the code is already loaded in layout.php ?
this code is in an add formhere is the complete routine for reference, the bold items are the textarea fields
loadjs.ready("load", function () {
// Startup script
// Write your table-specific startup script here, no need to add script tags.
var element = document.getElementById("user_input_autocomplete_address");
if (element) {
const options = {
componentRestrictions: { country: "ca" },
fields: ["formatted_address", "geometry", "icon", "name", "opening_hours", "formatted_phone_number", "vicinity", "place_id", "type", "website", "business_status", "photos"]
};
var autocomplete = new google.maps.places.Autocomplete(element, options);
google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
}
function onPlaceChanged() {
var place = this.getPlace();
var type_element = document.getElementById("x_poi_Business_Name");
type_element.value = place.name;
type_element = document.getElementById("x_poi_Address");
type_element.value = place.formatted_address;
type_element = document.getElementById("x_poi_Phone_Number");
type_element.value = place.formatted_phone_number;
type_element = document.getElementById("x_poi_Vicinity");
type_element.value = place.vicinity;
type_element = document.getElementById("x_poi_Business_Status");
type_element.value = place.business_status;
type_element = document.getElementById("x_poi_Place_id");
type_element.value = place.place_id;
type_element = document.getElementById("x_poi_Opening_Hours");
**type_element.value = place.opening_hours.weekday_text.toString();**
type_element = document.getElementById("x_poi_Website");
type_element.value = place.website;
type_element = document.getElementById("x_poi_Icon");
type_element.value = place.icon;
**type_element = document.getElementById("x_poi_Place_Photo"); **
**type_element.value = place.photos[0].html_attributions[0];** <<== just returning the first item of the array
}
});
Since you have moved all code with “google” inside your handler for “load” event, it should be fine.Regarding the properties of “place”, you better check what are available in your browser’s Console panel first, e.g.
console.log(place);