在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:apneadiving/Google-Maps-for-Rails开源软件地址:https://github.com/apneadiving/Google-Maps-for-Rails开源编程语言:JavaScript 66.7%开源软件介绍:¶ ↑Google Maps for RailsGmaps4rails is developed to simply create a Google Map with overlays (markers, infowindows…). Yet it's backed on a very flexible codebase which could be prone to accept other map providers. Use it with any Ruby app (I guess you could simply take the js anywhere if you like). Here is a quick tutorial on youtube, and my presentation on speaker deck. For live examples, see here. ¶ ↑A note for < 2.x usersGoogle-Maps-for-Rails-2.0 is an important rewrite to keep the minimum code and features. If you're migrating from previous versions, you may want to read the rationale about it. ¶ ↑Requirements1) Gemfile gem 'gmaps4rails' 2) HTML Add a div to bear your map, example: <div style='width: 800px;'> <div id="map" style='width: 800px; height: 400px;'></div> </div> 3) Javascript Dependencies: Insert google scripts in your dom: <script src="//maps.google.com/maps/api/js?key=[your API key]"></script> <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> <script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes --> You'll require underscore.js too, see here: underscorejs.org/ (`lo-dash` is compatible too, your choice!). 4) Javascript source code If you have the asset pipeline, add this: //= require underscore //= require gmaps/google If you don't have asset pipeline, you'll need to import the js OR coffee files: rails g gmaps4rails:copy_js rails g gmaps4rails:copy_coffee 5) Javascript code: Create your map: handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers([ { "lat": 0, "lng": 0, "picture": { "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png", "width": 32, "height": 32 }, "infowindow": "hello!" } ]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); }); 6) Add options: You're likely going to want to customize your maps by passing an options object. Using the example above, let's say you'd like to disable the map controls. This and any other options you can find in the Google Maps API reference can be passed into the `provider` options hash like so: handler = Gmaps.build('Google'); handler.buildMap({ provider: { disableDefaultUI: true // pass in other Google Maps API options here }, internal: { id: 'map' } }, function(){ markers = handler.addMarkers([ { "lat": 0, "lng": 0, "picture": { "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png", "width": 32, "height": 32 }, "infowindow": "hello!" } ]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); } ); You can see other examples of adding `provider` options in the live examples. Also, check the wiki for further documentation on the possible JavaScript methods. ¶ ↑Generating JSONIn your controller: @users = User.all @hash = Gmaps4rails.build_markers(@users) do |user, marker| marker.lat user.latitude marker.lng user.longitude end In your view: <script> markers = handler.addMarkers(<%=raw @hash.to_json %>); </script> ¶ ↑Easily customizableYou can change almost everything with a few lines of code. See details here. ¶ ↑Options
¶ ↑Todo?Feel free to contact us, you have your say. ¶ ↑CopyrightMIT license. Author: Benjamin Roth |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论