How to the Google Map working Step by Step Tutorial

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.

How to the Google Map working Step by Step Tutorial

Postby cdmak » Wed Jan 10, 2018 6:55 pm

Hello,
Thanks for PHPMaker it is awesome.

Has anyone got the Google Map working like the one in the PHPMaker demo site with the map above the records? Getting it to work in the address field is pretty easy but I can not find a user documentation from us PHPMaker users on how some one did it. So I will at least list how you get your address field working. This tutorial is for your use at your own risk and the makers of PHPMaker don't offer support for third party scripts. This is just a PHPMaker user showing you how to do it.

1. First go get your Google API key, you will need a Google account to get it, do a search for "google maps get api key" when you get it copy and put it somewhere for safe keeping, it will also be stored in your PHPMaker project file later on.
2. You will need a table that has at least these fields in it: "latitude", "longitude", "address" Also note that you will need to look up the the lat. and long., you can use a place online to do it do a search for "zip code longitude latitude lookup" to type in your zip codes to get the data.
3. Populate your records with the above information, latitude, longitude, address and zip code.
4. Now in PHPMaker go to the table with your address information and click on the Address field, you will then see the "View Tag" section that is next to the "Edit Tag" section. (Sorry to be so descriptive)
5. Down at the bottom of the "View Tag" section you will see a field called "Custom View Tag" this is where you will enable the the "Google Maps" plugin. Click the empty "View Tag" field and then click the down arrow that shows up in it, doing this will bring up the "Customer View Tag" dialog box. Next check the checkbox for "Enabled" next to the Google Map plugin.
6. Next with the dialog box "Custom View Tag" still open click on the "Settings" tab, this is where you will enter in your apikey and select the fields in your database table for latitude and longitude and address, this will be similar to step 5 in that you will click the empty field to get the drop down arrow in order to make your selection. Note the fields title with "_field" at the end are the ones that connect to your database table fields, so go a head and map them, latitude_field to the latitude field in your table and so on. Map the title_field to your address field so the address maker will show you the address when you click it on the Google Map, otherwise you will not see it when the map renders in the web browser.
7. Generate your PHPMaker project file to make your database driven PHPMaker website by clicking the yellow lightning bold icon button at the top of PHPMaker or go to Tools > Generate All Scripts or hit F9 on the keyboard, whatever you like.
8. Login to your newly generated website and go the the table with the Google Map feature and click view on one of the records and you will see the Google Map with the location marker showing where the address is.

Hope this works for you.
Please someone if you can make a tutorial here on how to make the Google Map in the demo project with the map above the records and how the map updates when you search for records and such.
Thank you
cdmak
 
Posts: 23
Joined: Tue Nov 22, 2016 10:51 am

Re: How to the Google Map working Step by Step TUTORIAL

Postby sagmag » Wed Jan 10, 2018 7:15 pm

This is wonderfull I wanted actually to post the question how can I do that... but on the other side I don't want to display what is in my database only, I want also to allow user to click on the map and the I save the record in the database to show it on the list view page later.
sagmag
 
Posts: 46
Joined: Tue Jul 18, 2017 1:15 pm

Re: How to the Google Map working Step by Step TUTORIAL

Postby cdmak » Thu Jan 11, 2018 9:27 pm

Here is the CSS styling if you would like to center the map and make it 100% wide. The height is commented out but you can un-comment it and set the height. The tablename and fiedname should be changed to your specification. Hope this helps you. Blessings.

#gm_<tablename>_x_<fieldname>.ewGoogleMap
{
display: block !important;
width: 100% !important;
/*height: 222px !important;*/
margin-left: auto !important;
margin-right: auto !important;
}


EXAMPLE:

#gm_customers_x_address.ewGoogleMap
{
display: block !important;
width: 100% !important;
/*height: 222px !important;*/
margin-left: auto !important;
margin-right: auto !important;
}
cdmak
 
Posts: 23
Joined: Tue Nov 22, 2016 10:51 am


Return to General Discussion (PHPMaker)