[Intermediate] Google map and asset listing

[robin_shi]

[attachment=355:v.zip] I have set up an "application" in matrix where students can find useful accommodation information. I'd like to share the tip with you guys having my supervisor's approval.


The application allows public user to register accommodation information to our website, then the administrative staff receives notificaiton email, goes to the asset, marking up extra metadata and put it live.



Here are the assets used in this "application" followed by the purpose.

[list=1]

News item: the asset allows user to input summary and body information before the asset is created)
[*]Asset builder: to create new items
[*]Trigger: to send out notification emails; change future status (the information will be archived if no request for continuing posted)
[*]Paintlayout: to print metadata to both HTML and Google Map scripts
[*]metadata schema for news item
[*]asset listing page: list out all accommodation in a table and google map(shown below)
[*]customised layout for simple edit interface (divs within the layout have different permission settings since the news item asset is used elsewhere)
The asset listing page looks like below, of course it prints metadata fileds
[attachment=337:1.jpg]

The news item looks like below.
[attachment=338:2.jpg]
By using conditional keywords, the description for accommodation type is printed depending on the value of the metadata field and the campus location and description.

Last week I found a way to set javascript varibles' value by asset listing page, so all the news item assets could be marked up in a map. Here it is,
[attachment=339:3.jpg]
To do so, in the asset listing page contents, put

    	   //Campus
    				   var point = new GLatLng(-22.2222222, 222.2222222);
    				   var marker = new GMarker(point);		
    				   map.addOverlay(createMarker(point, campus, "
Campus
    		   
    		   Street name
    		   State
")); 
    			//Accommodation
    				   %asset_listing%

And in type formats put

    	   var point = new GLatLng(%asset_metadata_Latitude%, %asset_metadata_Longitude%);
    		   var marker = new GMarker(point);		
    		   map.addOverlay(createMarker(point, accom, "
%asset_attribute_name%
    		   %asset_metadata_Address%
    		   %asset_metadata_Accommodation_Type%
    		   Preference: %asset_metadata_Person_Required%
    		   %asset_metadata_Weekly_Cost_of_Accom% per week
"));

So the codes to paint the icon(together with metadata fields) for each accommodation will be repeated till the end of the asset listing.
Remember to set "style information: presentation" and "content type" to "raw html" otherwise Matrix will print <div>s which break Javascript.

The method to set up google map can be found at http://code.google.com/apis/maps/documentation/, but I got the trick of "onload" from http://code.google.com/apis/maps/documentation/. Sorry I cannot find that post but I am sure it's in the forum.

:P' /> 3.jpg (78.1 KB) 1.jpg (45.9 KB) 2.jpg (77.7 KB) squiz_conf_google_map_integration_2.pdf (300 KB)

[ndrw]

Yep this is pretty cool, I have also done similar and created an asset builder that pulls in the lat/long coords from the google map so the user drags the marker, types the name of the new asset, then just submits the form. Heaps more features with google maps I'd like to explore too…fun but maybe not completely useful

[Duncan_Robertson]

ndrw, how did you populate the co-ordinates into a matrix form? Could you write a tut?

[ndrw]

Hey Duncan, here are the basics:


Have the JS all sitting in with the google map, because you need to be able to update the fields on whatever maps events you are using (probably load, dragend and maybe moveend). I'd use a different map instance/page for the builder and another for the front end…saves loading the additional code for the public.



You need to find the element ID for the lng/lat fields on you asset builder form, they might be slightly different if you have a newer version of matrix than me

    document.getElementById("metadata_field_text__value").value = center.lng().toFixed(5);
    document.getElementById("metadata_field_text__value").value = center.lng().toFixed(5);

Just stick that code under any gmap listeners you are using -easy! I also disabled the fields the JS is filling out just to cut down on possible data entry mistakes

    document.getElementById("metadata_field_text__value").readOnly="readonly";

There might even be more useful stuff you can do with the coord data for your app, mine also sets the focal point of the new asset/place which is used in the asset listing.

That is just about it on the matrix side, examples of moving a marker around here.

[madmax]

Old topic but to see Matrix and Google maps in action, check out http://www.intheirwords.org and check out any one of the veteran trunk maps. Here is an http://www.intheirwords.org map.


I took a slightly different approach with the user interface on creating maps and used a link manager page for the common people here to build maps with. It had the coordinates and major locations preloaded into, but they also have an asset builder for those special locations. Then the asset listing simply lists the markers into the Google js. The google maps forums were a wealth of information for helping me through that crazy API… of course it all makes sense when you finish it but not so much when you start. :huh:

[Huan_Nguyen]

The next release of Matrix 3.18.5 will include a new Google Map asset which minimize the amount of JS code you'd have to written, allow listing of different types of data and make use of many features in the Google Map API. Keep a close watch =).

[robin_shi]

Hi guys,


I hope the presentation made sense to the google map integration.

I have edited the topic with the Powerpoint in the conferece (coding part only)



Robin