NAVIGATION
This shows you the differences between two versions of the page.
|
3rd-party-modules:googlemaps:googlemaps-docu:googlemaps-docu-cp [2012/12/26 03:45] Peter Bracher |
3rd-party-modules:googlemaps:googlemaps-docu:googlemaps-docu-cp [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | {{indexmenu_n>500}} | + | {{indexmenu_n>800}} |
| ====== CP Content-Part ====== | ====== CP Content-Part ====== | ||
| Line 315: | Line 315: | ||
| <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&key=xyz'></script> | <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&key=xyz'></script> | ||
| </code> | </code> | ||
| - | This has no effect to the map behaviour what so ever, it just tells Google, that the map was loaded in a browser somewhere and adds the loading to the report in the corresponding Google account. | + | This has no effect to the map behaviour what so ever, it just tells Google, that the map was loaded in a browser somewhere and adds the loading to the report in the corresponding Google account.\\ |
| - | See here for the modules admin section of the Google API keys. | + | <note important>Use only one key per page, otherwise you may violate the Google restrictions and get punished ;-) ! In case of multiple maps with diferent keys on one page, the module uses ONLY the key of the last map on the page for the API call</note> |
| + | |||
| + | [[googlemaps-docu-key|See here]] for the modules admin section of the Google API Keys. | ||
| Line 323: | Line 325: | ||
| ===== KML ===== | ===== KML ===== | ||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_140.jpg|}}\\ | ||
| + | Writes a kml-file (xml) containing all your selected kml-points.\\ | ||
| + | Note: in case none of your selected points is a kml-point the kml file will not be created!\\ | ||
| + | KML points can be displayed not only in Google Maps but also in **Google Earth**. | ||
| + | When you update the content part with your google map and the kml-option is marked, then the script writes (overwrites in future updates of the cp) a kml file to folder: | ||
| + | content/tmp/ | ||
| + | <note important>this folder has changed from V3.0 to V3.5 of the module!\\ | ||
| + | It's no longer the kml folder in the module because the content/tmp folder makes more sense and less work for such things.\\ | ||
| + | If you Update to V3.5 you can delete the kml folder in the Googlemaps Module</note> | ||
| + | When the file exists the path-description becomes a link you can click in order to get a preview of your kml content in Google Earth (of course Google Earth needs to be installed on your computer). | ||
| + | |||
| + | |||
| + | <note important>Google no longer supports the Geo extension to the Sitemap protocol. Therefore the kml file has no other function for the moment than the ability to view the content in GoogleEarth by manually open the file. We have to find a way to tell Google about geographically-based URLs by including them in a regular Web Sitemap.</note> | ||
| ===== additional API Script ===== | ===== additional API Script ===== | ||
| + | Finally, if you need more, you can add script code to the map.\\ | ||
| + | Each map created by the module will have a unique map object containing the ID number of the current content part.\\ | ||
| + | You must use this ID when adding own code to the object. Same for the div-container that holds the map.\\ | ||
| + | == Examples == | ||
| + | To add a KML/GeoRSS Layer to your map use: | ||
| + | <code javascript>var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'); | ||
| + | ctaLayer.setMap(map[CP_ID]);</code> | ||
| + | [[https://developers.google.com/maps/documentation/javascript/layers#KMLLayers|See here]] for more infos to KML Layers | ||
| + | |||
| + | |||
| + | |||
| + | == Structure == | ||
| + | |||
| + | The structure of the rendered document is basically as follows:\\ | ||
| + | <code html|h googlemapsmodule.html |h> | ||
| + | <html> | ||
| + | <head> | ||
| + | |||
| + | ... | ||
| + | ... load all external API's | ||
| + | ... load all js and css files from the module directory | ||
| + | |||
| + | <script type="text/javascript" charset="utf-8"> | ||
| + | //global vars | ||
| + | ... | ||
| + | var map41 = null; | ||
| + | |||
| + | function onLoad41() { | ||
| + | |||
| + | var mapObj41 = document.getElementById("41"); | ||
| + | if (mapObj41 != 'undefined' && mapObj41 != null) { | ||
| + | var mapOptions41 = { | ||
| + | ... | ||
| + | }; | ||
| + | mapOptions41.center = new google.maps.LatLng( | ||
| + | xx.xxx, | ||
| + | xx.xxx | ||
| + | ); | ||
| + | map41 = new google.maps.Map(mapObj41,mapOptions41); | ||
| + | |||
| + | var point = new google.maps.LatLng(xx.xxx,xx.xxx); | ||
| + | var marker =createMarker(map41, point,"Title","HTML for info window", icon41['buspng'].image, icon41['buspng'].shadow, "", '', 237, 'Address' ); | ||
| + | markers41.push(marker); | ||
| + | gmarkers41[237] = marker; | ||
| + | ... all markers | ||
| + | |||
| + | //additional javascript | ||
| + | |||
| + | } | ||
| + | } | ||
| + | |||
| + | ...more javascript for google maps module | ||
| + | |||
| + | </script> | ||
| + | |||
| + | ... | ||
| + | |||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | ... | ||
| + | |||
| + | <div style="float:left;overflow:hidden;" class="gm-main-container"> | ||
| + | <div id="nnn41" style="float:left;width:300px; height:300px;position:relative;" class="GM_DivContainer"> | ||
| + | <script type="text/javascript" charset="utf-8"> | ||
| + | document.write('<div id="41" style="width: 300px; height: 300px; position:relative;"><\/div>'); | ||
| + | </script> | ||
| + | <noscript>Google Maps requires Javascript</noscript> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div id="gm-sidebar41" class="gm_sidebar" style="display:none;float:left; width: 300px;"> | ||
| + | ... Sidebar | ||
| + | </div> | ||
| + | <div style="clear:both;"></div> | ||
| + | |||
| + | <script type='text/javascript'> | ||
| + | google.maps.event.addDomListener(window, 'load', onLoad41); | ||
| + | </script> | ||
| + | |||
| + | <div id="outer_more41" class="outer_more" style="display:none"> | ||
| + | ... More-Button | ||
| + | </div> | ||
| + | |||
| + | ... | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </code> | ||