NAVIGATION
[[CP Content-Part]]
Differences
This shows you the differences between two versions of the page.
|
3rd-party-modules:googlemaps:googlemaps-docu:googlemaps-docu-cp [2012/12/27 22:07] 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 340: | Line 342: | ||
| ===== 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> | ||
