NAVIGATION
This shows you the differences between two versions of the page.
|
3rd-party-modules:googlemaps:googlemaps-docu:googlemaps-docu-cp [2012/12/25 22:28] 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 281: | Line 281: | ||
| {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_130.jpg|}}\\ | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_130.jpg|}}\\ | ||
| - | With the module it's easy to let your users search the content of the points in your map. Just enable 'search' in backend to activate the tab.\\ | + | With the module it's easy to let your users do search queries based on the content and/or the address of the points in the map. Just enable 'search' in backend to activate the tab.\\ |
| The tab shows a form to enter the search request. You can individually activate the fields.\\ | The tab shows a form to enter the search request. You can individually activate the fields.\\ | ||
| + | The result list appears in the tab, the same dimension stuff as in directions-tab happens here.\\ | ||
| + | |||
| == Text Search == | == Text Search == | ||
| search the content of the points and display the point if any match is found. You can restrict the search to any combination of title/info | search the content of the points and display the point if any match is found. You can restrict the search to any combination of title/info | ||
| window/searchlisting\\ | window/searchlisting\\ | ||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_132.jpg|}}\\ | ||
| == Location Search == | == Location Search == | ||
| search for a point at this location (1km or mile distance from the address) and display the point if any match is found.\\ | search for a point at this location (1km or mile distance from the address) and display the point if any match is found.\\ | ||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_133.jpg|}}\\ | ||
| == within a distance of == | == within a distance of == | ||
| give the location search a greater radius (miles or kilometers depending of users browser language)\\ | give the location search a greater radius (miles or kilometers depending of users browser language)\\ | ||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_134.jpg|}}\\ | ||
| + | == Combination == | ||
| + | Yu can do the search query with any combination of text/address/radius\\ | ||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_135.jpg|}}\\ | ||
| + | |||
| + | ##**New in GoogleMaps Module V3.5**##\\ | ||
| + | You may have noticed the red circle witch marks the radius of the search within the map! Appears as soon as a location search is executed.\\ | ||
| ==== ==== | ==== ==== | ||
| Line 297: | Line 306: | ||
| <note important>This internal search function searches only the points of the module! It does not search the Google-Database (Places Library)!</note> | <note important>This internal search function searches only the points of the module! It does not search the Google-Database (Places Library)!</note> | ||
| - | |||
| - | The result list appears in the tab, the same dimension stuff as in directions-tab happens here. | ||
| - | The text for the search listing comes from the points definition in backend. It's wysiwyg | ||
| - | html so you can add virtually everything even you-tube videos (search for 'london'). | ||
| - | Note: empty fields are not taken in account for the search. But you can search for text AND | ||
| - | within the range of a certain address when both/all fields have values. | ||
| ===== API Console Key ===== | ===== API Console Key ===== | ||
| + | |||
| + | {{:3rd-party-modules:googlemaps:googlemaps-docu:gm_138.jpg|}}\\ | ||
| + | The selected key is added to the API call in the header of the document where the map appears.\\ | ||
| + | <code html> | ||
| + | <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&key=xyz'></script> | ||
| + | </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.\\ | ||
| + | |||
| + | <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. | ||
| - | ===== XML Loader ===== | ||
| - | |||
| ===== 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> | ||