[Beginner] Getting Started with Google Map Asset

(Huan Nguyen) #1

A number of people has been asking about documentation for the Google Map Asset. There has been no official manual yet, so I'm writing a quick guide for people who are interested in setting up a Google Map in MySource Matrix


Setting up Google Map Asset


  1. Sign up for Google Map API key at http://code.google.com/apis/maps/signup.html
  2. Create a Google Map asset in Matrix
  3. Acquire Lock(s) on the Google Map asset from Details screen
  4. Copy the registered Google Map API and paste into the "API Key" text box on the Details Screen
  5. Commit the change
  6. Go to the "Default Setting" section on the Details Screen
  7. Click on the blue globe icon, a mini map will appear to allow setting of map center and zoom level. User can click directly on the map and the values in the latitude, longitude, zoom level text boxes will change.





    Since the Google Map asset work similarly to Asset Listing in MySource Matrix, Page Contents bodycopy and Page Contents No Result bodycopy are used.

    "Page Contents" bodycopy is used when there are locations being listed by Google Map Asset

    "Page Contents No Results" bodycopy is used when there are no listing configured for Google Map Asset



    Displaying a blank map:
  8. After completing the above steps, "Page Contents No Results" bodycopy will be used to print the frontend as listing has not been configured.
  9. To display just a blank map, copy the keywords in "Page Contents" bodycopy to "Page Contents No Results" bodycopy

    i.e.:
  10. Save the changes for "Page Contents No Results" bodycopy.
  11. Preview the asset, the map will be displayed. The height and width of the map can be changed in the "Map Initialisation" attribute on the Details Screen of the Google Map Asset


Configure Location Listing By Latitude and Longitude
1. Create a folder name "Locations"
2. Create a number Google Map Location asset in there. Make sure to fill each of them with Name, Latitude, Longitude, Description information.
3. Go to the Listing Options Screen of the Google Map asset.
4. Acquire the locks, Add a new Asset Types to List of type "Google Map Location". Also select the appropriate status(es) to list.
5. Select the "Locations" as the Root Nodes to list locations from.
6. Preview the asset, the map will be displayed with all the created locations plotted on the map.
Note that since there are locations to be listed, "Page Contents" bodycopy is used to display the map. Any HTML or JavaScript changes should be made to the "Page Contents" bodycopy instead of "Page Contents No Results" bodycopy.
7. Clicking on each location on the map will bring up a Popup with the description of each location. This popup layout can be changed from the "Popup Window" bodycopy of the Google Map Asset
8. An Image can be used as icon for a particular location on the map. The "IconURL" attribute for each of the location can be changed to allow custom con to be displayed on the map instead of the default pink / orange icon of Google.

Configure Location Listing By Address
1. Create a folder name "Locations By Address"
2. Create a metadata schema name "Location Information"
3. Create a section for the metadata schema
4. Create 3 text fields in the section with the following names: "Address", "Description", "IconURL"
5. Apply the metadata schema on the "Location By Address" folder
6. Create "Data Record" assets in this folder, each of them will represent a location.
7. Edit the metadata for each of this location and put in Address, Description at least.
8. Go to "Listing Options" screen of the Google Map asset
9. Add a new Asset Types to List of type "Data Record". Also select the appropriate status(es) to list.
10. Select the "Locations By Address" as the Root Nodes to list locations from.
11. A number of text boxes will appear after the change is committed. Leave the "Latitude" and "Longitude" keyword text boxes blank. Fill in
Address Keyword with "% asset_metadata_Address %",
Description Keyword with "% asset_metadata_Description %"
Icon URL Keyword with "% asset_metadata_IconURL %" (If custom icons are used for each location)
12. Go to the Details Screen of the Google Map asset
13. Acquire Locks and set "Enable Geocoding Service" to "Yes".
14. Preview the asset, the Google Map asset will send a query to retrieve latitude and longitude information for each of the location, and cache this information. The first load might take a while, but the next time the map is view it will load faster as all the address latitude and longitude has been found and cached earlier.


Loading KML file. Refer to this topic on the MySource Matrix Forum
http://code.google.com/apis/maps/signup.html
(Nic Hubbard) #2

This is a great tutorial, thanks for this!


Sadly, we still have the problem with the mime type warning telling us we don't have the google earth plugin installed when we view any Google Map assets. Guess we need to update!

(Duncan Robertson) #3

Huan, thanks for the tut mate!

(Huan Nguyen) #4

My pleasure. I'l try to post up some more setup later when I can.
Nic, you can contact squiz support to patch it up for you. It's a very small patch.

(Peter Grube) #5

thanks for the Google maps tips, Huan. I have a problem with the popup window in that I can't get the text to align to the top. The code I use in the Popup window div is below. In addition to using text-align: top; I have also tried vertical-align: top; but it makes no difference, there is always a large gap between the top of the popup window and the first line of text.


<div style="text-align: top; width: 300px; height: 40px; border: solid 0px;"> <b>%asset_name%</b><br>%asset_metadata_Address%<br>%asset_metadata_Description%</div>



cheers, Pedro

(Huan Nguyen) #6

Hi Pedro, this is the html that i use for my popup window. I think Google want to put the text in the middle of the popup. So the solution is is use CSS float and position relative top, -35px.

    

    	

    	
    		Name: 
    	
    	
    		%location_name%

This should work =).

(Peter Grube) #7

I tried that and it works a treat, thanks Huan.

(Peter Grube) #8

I have noticed that when linking to an asset from a Google Map Popup Window, the URL displays the asset id (eg. /?a=4955) at the end of the URL instead of the asset name.


The link still works, but is there a way that the URL could display the name of the asset rather than the asset id?



The method I use to get a link into the Popup Window is as follows…



I'm using the Description field in a Googe Map Location asset to link to page assets within our website, using the standard method of linking to an asset (eg <a href="./?a=4955">test</a>).



When I then use the Description field in a Popup Window to be displayed in a map (using the keyword '%location_description%'), the link appears in the Popup.

(Huan Nguyen) #9

hi Pedro,
The reason why the assetid is used as the URL to the asset is because your asset(s) might be moved around in the system, and depends on where it is moved to, different site say, then the URL of the asset will change. That's why the assetid is used to make sure no matter where the asset is moved to, you still can reference to it. Where if you have a fixed URL, then once your asset is moved, access to the URL will result in a 404.

If you are certain that your asset will not move, then you can go to the "Web Paths" screen of your asset to determine the absolute URL to the asset, and use it as the description for your locations. Hope I answered your question.

Huan

(Peter Grube) #10

Hi Huan, I think I probably didn’t explain the problem very well… the URL I’m talking about about is the one that appears on the frontend in the location bar of the browser when the link has been linked to, which appears as http://www.test.com/?a=4955 instead of the more usual http://www.test.com/?a=4955 (where the asset name is ‘test page’). Normally Matrix provides a user-friendly URL based on asset names rather than asset id’s, but not when an asset is linked to from a Google Map Popup Window. I hope this makes it clearer what the issue is.





[quote]hi Pedro,

The reason why the assetid is used as the URL to the asset is because your asset(s) might be moved around in the system, and depends on where it is moved to, different site say, then the URL of the asset will change. That's why the assetid is used to make sure no matter where the asset is moved to, you still can reference to it. Where if you have a fixed URL, then once your asset is moved, access to the URL will result in a 404.

If you are certain that your asset will not move, then you can go to the "Web Paths" screen of your asset to determine the absolute URL to the asset, and use it as the description for your locations. Hope I answered your question.

Huan[/quote]

(Huan Nguyen) #11

Hi Pedro,
Did you insert the Link using the WYSYWIG? Or did you hard coded it yourself?

(Peter Grube) #12

I hardcoded it, there is no other way of doing it as far as I know in the Description field of a Googe Map Location asset.

(Huan Nguyen) #13

Once you have hardcoded the link in as 

    test
matrix won’t alter the link and replace it with the full URL as you expected. (I can not think of any instance in which Matrix does this). Whatever you put in the Description field for the Google Map Location asset, it will come out “as is” in the popup window. If you want the full URL to the asset, you would have to put in the full URL as the value for the Description field. However as I explained earlier, if you move your page asset somewhere else, and its URL changes, then your hardcoded URL in the Description field will no longer work.
(Peter Grube) #14

Hi Huan,


the most common instance that I can think of where linking to an asset using the asset id results in the URL displaying the asset name rather than the asset id is when linking to an asset from a Standard Page.

(Greg Sherwood) #15

When you link to assets in normal content, those bodycopy DIVs do special caching and processing to convert the links to friendly URLs and to create NOTICE links between pages for deletion warnings. This doesn't happen in stand-alone WSYWIYG fields like in News Items or with this popup. You will need to hard-code the friendly URL if you want to use it in this case.

(Peter Grube) #16

thanks for clearing that up, Greg.

(Peter Grube) #17

I have "Enable Street view" set to 'Yes' in a Google map asset, but when I preview the asset, there is no street option available. Is there some extra step involved in enabling street view?

(Huan Nguyen) #18

You would need to add the keyword [quote]%street_view%[/quote] into the Google Map Page Content Bodycopy. This keyword is equivalent to adding a div

You can position this div anywhere on your screen and when you click on a location on your map, the street view windows will also be populated. Also consider the keyword [quote]%toggle_street_view_window%[/quote] to hide/show your street view window.

(Peter Grube) #19

thanks Huan, I had no idea that a keyword would be needed in addition to turning on 'Enable Street view'. It works really.

[quote]You would need to add the keyword into the Google Map Page Content Bodycopy. This keyword is equivalent to adding a div

You can position this div anywhere on your screen and when you click on a location on your map, the street view windows will also be populated. Also consider the keyword to hide/show your street view window.[/quote]

(Anurag) #20

Is thier are way by which i can let my users to create new locaitons and put some text on google map from my site. How do i give them thsi flexibility to add new locations…