I'd like to be able to display CMS-generated Googlemaps in an accordian menu (see http://www.switchonthecode.com/tutorials/javascript-and-css-tutorial-accordion-menus for an example, not mine, if you're not familiar with accordian menus).
The only way I can include CMS-generated Goolemaps in a Standard page is to nest them, which means they're in a separate DIV, so when I'm coding the accordian menu (in a Raw HTML DIV), I haven't found a way of including the nested DIV with the Googlemap in the code.
I tried using <!–#include file="xyz" --> but this doesn't work.
Any suggestions?
A matrix content div doesn't necessarily mean it has to be a HTML div. You can set the presentation to raw html stop this from happening. I would see this possibly being split over multiple divs:
The first div (raw html, presentation type raw html)
Accordian 1
Accordian 2
The second div (nested content, presentation type raw html)
Nested google map
The third div (raw html, presentation type raw html)
Hope that makes sense, basically you have to tell matrix to stop outputting it's default html so that you have the greater control over your own.
[quote]
A matrix content div doesn't necessarily mean it has to be a HTML div. You can set the presentation to raw html stop this from happening. I would see this possibly being split over multiple divs:
The first div (raw html, presentation type raw html)
Accordian 1
Accordian 2
The second div (nested content, presentation type raw html)
Nested google map
The third div (raw html, presentation type raw html)
Hope that makes sense, basically you have to tell matrix to stop outputting it's default html so that you have the greater control over your own.
[/quote]
Thanks Anthony, that got me on the right track, I found I had to use <span> rather than <div> though at the crucial point where the nested divs are. Still working on getting it working right in some browsers.
Heading 1
Heading 1 content goes here...
The second div (nested content, presentation type raw html)
Nested google map
The third div (raw html, presentation type raw html)
Heading 2
Heading 2 content goes here...
Hi Anthony,
I now have the accordion script working really well with one map, but as soon as I add a second map, it doesn't work. Even without the accordion, nesting more than one google map in a Standard page doesn't work.
Could this be because the Map initialisation script for each map refers to id="map"? (see below)
… and the associated Javascript refers to getElementById("map") (see below)
function gmap_init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//retrieveMarkers();
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, zoomLevel);
map.setMapType(map_type);
}//end if
}//end gmap_init()
So the javascript probably can't deal with more than one map at a time?
Is there a work-around for this dilemma?
So maybe Is there any work-around to this dilemma?
I believe Google maps is capabable of running more than one, but if you are using the google maps asset and it is generating that content with an id then it may not be possible to use 2 google map assets on the one page without development. However, the google map asset is just a wrapper around the javascript API for google maps and you may be able to duplicate the content it generates and create yourself a second map with a different ID and init function. It may require additional customisation, but should be a work around.
I did try to rename the id of the second map in the initialisation script for that map, as follows
[code]
<div id="map2" style="width:400px;height:400px;border:solid 1px;"></div>
<script type="text/javascript">
gmap_init();
window.onunload = GUnload;
</script>
[code]
…but because the /asset_types/google_map/js/map_lib.js file refers to getElementById("map") it's only ever going to look for id="map", no?
[quote]
…but because the /asset_types/google_map/js/map_lib.js file refers to getElementById("map") it's only ever going to look for id="map", no?
[/quote]
That's right. I can't really speak from a position of experience with the asset itself, I did a few implementations before that asset was developed. You would need to alter the gmap_init() function. The following example would create a second instance of the map with the same location, zoom level and map type. I am not certain, however, without testing what impact that would have on the content generated by the google map asset.
function gmap_init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//retrieveMarkers();
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, zoomLevel);
map.setMapType(map_type);
map2 = new GMap2(document.getElementById("map2"));
map2.setCenter(location, zoomLevel);
map2.setMapType(map_type);
}//end if
}//end gmap_init()
[quote]
That's right. I can't really speak from a position of experience with the asset itself, I did a few implementations before that asset was developed. You would need to alter the gmap_init() function. The following example would create a second instance of the map with the same location, zoom level and map type. I am not certain, however, without testing what impact that would have on the content generated by the google map asset.
function gmap_init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//retrieveMarkers();
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, zoomLevel);
map.setMapType(map_type);
map2 = new GMap2(document.getElementById("map2"));
map2.setCenter(location, zoomLevel);
map2.setMapType(map_type);
}//end if
}//end gmap_init()
[/quote]
thanks Anthony, I'll give that a try.
[quote]
That's right. I can't really speak from a position of experience with the asset itself, I did a few implementations before that asset was developed. You would need to alter the gmap_init() function. The following example would create a second instance of the map with the same location, zoom level and map type. I am not certain, however, without testing what impact that would have on the content generated by the google map asset.
function gmap_init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//retrieveMarkers();
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, zoomLevel);
map.setMapType(map_type);
map2 = new GMap2(document.getElementById("map2"));
map2.setCenter(location, zoomLevel);
map2.setMapType(map_type);
}//end if
}//end gmap_init()
[/quote]
Hi Anthony, I can't find the .../asset_types/google_map/js/map_lib.js file to edit it, nor can I find .../asset_types/google_map/css/style.css. Do you have any idea where these are located in the CMS?
[quote]
Hi Anthony, I can't find the .../asset_types/google_map/js/map_lib.js file to edit it, nor can I find .../asset_types/google_map/css/style.css. Do you have any idea where these are located in the CMS?
[/quote]
Those files are in the google maps package:
<matrix root>/packages/google_maps/