| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | <!DOCTYPE html> |
| A | 2 | <html> |
| 3 | <head> | |
| 4 | <meta charset="utf-8"> | |
| 5 | <title>Layers Maps: Places</title> | |
| 6 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| 7 | <script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> | |
| 8 | <script src="../gmaps.js"></script> | |
| 9 | <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> | |
| 10 | <link rel="stylesheet" type="text/css" href="examples.css" /> | |
| 11 | <script> | |
| 12 | $(function () { | |
| 13 | var map = new GMaps({ | |
| 14 | el: "#map", | |
| 15 | lat: -33.8665433, | |
| 16 | lng: 151.1956316, | |
| 17 | zoom: 15 | |
| 18 | }); | |
| 19 | ||
| 20 | map.addLayer('places', { | |
| 21 | location : new google.maps.LatLng(-33.8665433,151.1956316), | |
| 22 | radius : 500, | |
| 23 | types : ['store'], | |
| 24 | search: function (results, status) { | |
| 25 | if (status == google.maps.places.PlacesServiceStatus.OK) { | |
| 26 | for (var i = 0; i < results.length; i++) { | |
| 27 | var place = results[i]; | |
| 28 | map.addMarker({ | |
| 29 | lat: place.geometry.location.lat(), | |
| 30 | lng: place.geometry.location.lng(), | |
| 31 | title : place.name, | |
| 32 | infoWindow : { | |
| 33 | content : '<h2>'+place.name+'</h2><p>'+(place.vicinity ? place.vicinity : place.formatted_address)+'</p><img src="'+place.icon+'"" width="100"/>' | |
| 34 | } | |
| 35 | }); | |
| 36 | } | |
| 37 | } | |
| 38 | } | |
| 39 | }); | |
| 40 | }); | |
| 41 | </script> | |
| 42 | </head> | |
| 43 | <body> | |
| 44 | <h1>GMaps.js Places layer</h1> | |
| 45 | <div class="row"> | |
| 46 | <div class="span11"> | |
| 47 | <div id="map"></div> | |
| 48 | </div> | |
| 49 | <div class="span6"> | |
| 50 | <p>You can easily add or remove a layer using GMaps.js:</p> | |
| 51 | <pre>map.addLayer('places', { | |
| 52 | location : new google.maps.LatLng(-33.8665433,151.1956316), | |
| 53 | radius : 500, | |
| 54 | types : ['store'], | |
| 55 | search: function (results, status) { | |
| 56 | //do something with the result | |
| 57 | } | |
| 58 | }); | |
| 59 | </pre> | |
| 60 | <p><span class="label notice">Note: </span> There are 3 types of function to use: <strong>search()</strong>, <strong>textSearch()</strong> and <strong>nearbySearch()</strong>. On the <a href="https://developers.google.com/maps/documentation/javascript/places" target="_blank">Google Places</a> page you can see the options to use per search function.</p> | |
| 61 | ||
| 62 | </div> | |
| 63 | </div> | |
| 64 | </body> | |
| 65 | </html> | |
