some gmaps.js examples 📝
- Demo Video - draw_circle
- Demo Video - draw_path
- Demo Video - draw_track
git clone https://github.com/twtrubiks/gmaps.git
cd gmaps
- 練習 gmaps.js 這個套件,一些小作品 😄
- draw_circle : 使用gmaps在地圖上畫圓圈。
- draw_path : 使用gmaps在地圖上畫直線。
- draw_track : 使用gmaps在地圖上畫軌跡。
Important
If you're developer, I'm moving gmaps.js to NPM, you can give your opinion and check the migration progress in Issue #404
gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.
Visit the examples in hpneo.github.com/gmaps Go to the API Documentation hpneo.github.io/gmaps/documentation.html
- Add a reference to Google Maps API
- Add gmaps.js in your HTML
- Enjoy!
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="gmaps.js"></script>
<style type="text/css">
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
</script>
</body>
</html>
With require.js, you need to load Google Maps JavaScript API first. For example, assuming you have a googlemapsapi.js
file:
define(['async!http://maps.google.com/maps/api/js?v=3&sensor=false'], function() {});
Next you have to define the dependency for gmaps.js:
require.config({
paths: {
"googlemapsapi": "googlemapsapi",
},
shim: {
gmaps: {
deps: ["googlemapsapi"],
exports: "GMaps"
}
}
});
Also, you can use the googlemaps-amd plugin.
If you would like to build gmaps from source run the following at the terminal:
git clone https://github.com/HPNeo/gmaps.git
cd gmaps
npm install
grunt
- Fix bug in getRoutes (see #373)
- Fix bug at trying to remove a large amount of markers inside a marker cluster (see #473)
- Check for Google Maps library before creating a GMaps object (see #467)
- Check the Google Maps API at instantiation instead of declaration (see #467)
- Add polyfill for google.maps.Rectangle.prototype.containsLatLng
- Render directions
- Added missing function for registering addListenerOnce
- Better check for
console.error
- Show an error in the console, instead throwing an error
- Fix bug at hiding markers' context menu when the map is zooming
- Fix bug in
array_map
- Remove the http so the library (Google Maps call) will also work under SSL without warnings
- Update route drawing methods to allow 'icons' option for drawPolyline
- Remove dependency on 'grunt-cli' having to be installed globally
- Fix removeMarkers
- Add overlay to mouseTarget when click event is set
- addControl/createControl now accepts HTML elements or HTML strings
- Add containsLatLng to google.maps.Circle
- Fix bug in drawPolygon
- Hide context menu before the zoom is changed
- Allow unitSystem setting in travelRoute
- Add functionality to remove controls
- Delegates non custom events to google.map
- Convert featureType and elementType toLowerCase in static maps
- Adds ability to listen for clicks on overlays
- Add RadarSearch to the places layer
- Update default control styles to match new Google Maps release.
- Fix and optimize removeMarkers
- Fix bug in addMarker (issue #270)
- Add UMD support (AMD, CommonJS, browser globals)
- Add retina support
- FitZoom only use visible markers
- Fix getRoutes
- Add callback for failure in getRoutes
- Update marker clusterer after remove marker
- Add support for string arrays to arrayToLatLng
- Allow initialising GMaps without new
- Added styled map support for static maps
- Fixed name display for styled maps
- Allow no zoom for static map request
- Fix IE8 bug using array_map
- Add Grunt and Bower support
- Fix buildContextMenu reference in addMarker
- Fix removePolylines and removePolygons
- Fix drawSteppedRoute
- Fix fitZoom
- Split gmaps.js in modules
- Enable new Google Maps style
- Add support for context menu in multiple maps
- Fix destination as address in getRoutes
- Support for removing Fusion Tables and GeoRSS/KML layers with removeLayer
- Improve event binding at adding markers, polylines or polygons
- Add native events to google.maps objects and custom events to GMaps maps
- Check for Google Maps library and defined element when initialize
- Allow route origins to be a string or array
- Fix context menu position bug
- New feature: StreetView Panoramas
- New methods: removePolyline and removePolygon
- Tests for Styled MapTypes
- Test suite
- Fix double event firing bug
- Allow create context menus for markers
- Fix bug in getElevations
- Rename fitBounds to fitLatLngBounds
- Support for GeoJSON in drawPolygon
- Use 'complete' instead of 'always' in GMaps.geolocate
- New feature: Overlay Map Types
- Add full support to google.maps.PolylineOptions
- New method: removeMarker
- New feature: Map Types
- Support to add google.maps.Marker objects in addMarker and addMarkers methods.
- Add support for other HTML block elements instead "div" (like "section").
- Use MarkerClusterer to group markers
- Check if GMaps is defined before load extensions
- Fix bug with disableDefaultUI option in constructor
- Fix another bug in createMarker
- Fix bug in createMarker
- Adding IDs, classes and innerHTML to createControl. (Note: Use 'content' instead 'text' in createControl)
- Add support for Places library in addLayer
- Fix map events without MouseEvent object
- Fix bug in drawCircle and drawRectangle
- Fix bug in zoomIn and zoomOut
- New methods: removePolygon and removePolygons
- Add support to Panoramio in addLayer
- New method: toImage
- Extend the drawSteppedRoute and travelRoute functions
- New feature: Layers
- New method: removeRoutes
- Access all native methods of google.maps.Map class
- Support for multiple overlays
- Add support to all marker events
- Add suport for animations at show and remove overlays
- Create GMaps class only when Google Maps API is loaded
- New feature: Elevation service
- New method: getZoom
- Minor improvements to support Backbone.js
- Fix controls position
- More default values in GMaps constructor.
- Remove jQuery dependency.
- New method "removePolylines" and alias "cleanRoute"
- New methods: fitZoom and fitBounds
- New method: refresh
- New options in GMaps constructor: width and height
- New methods: loadFromFusionTables and loadFromKML
- New feature: KML and GeoRSS
- Fix bug in getFromFusionTables
- New feature: Fusion Tables
- New feature: Custom controls
- New feature: Static maps
- Better GMaps.Route methods
- Fix typo in Polyline events
- Add InfoWindow events
- Add Polyline events
- Add drag and dragstart events to Marker
- Add avoidHighways, avoidTolls, optimizeWaypoints, unitSystem and waypoints options in getRoutes
- New method: createMarker
- geolocation and geocode methods are static now (using them with GMaps.geolocation and GMaps.geocode)
- Fix typo in geocode method
- Allow all MapOptions in constructor (see 'MapOptions' section in Google Maps API Reference)
- Add pane option ('floatPane', 'floatShadow', 'mapPane', 'overlayImage', 'overlayLayer', 'overlayMouseTarget', 'overlayShadow') in drawOverlay
- New methods: removeOverlay and removeOverlays
- Change pane ('floatPane' to 'overlayLayer') in drawOverlay
- Fix bug in drawCircle
- New feature: Overlays
- New method: drawCircle
- Bug fix: zoomIn/zoomOut can change zoom by argument
- New method: setZoom
- New class: GMaps.Route
- New feature: Geofence (with markers)
- New method: drawPolygon
- Bug fix: Change reserved word in Context menu
- New feature: Geocoding
- New method: drawSteppedRoute (similar to travelRoute)
- New events in addMarker
- Add step_number property in travelRoute method
- New feature: Context menu (for map and marker only)
- New method: travelRoute
- Change setCenter to panTo in GMaps setCenter method
- Save entire route data in routes array (instead saving only route path)
- Context menu and Route example (using travelRoute)
- drawPolyline can accept both an array of LatLng objets or an array of coordinates
- New methods: getRoutes and drawRoute
- Route example
- Rename drawRoute method to drawPolyline (more accurate)
- Marker example
- Map events
- Geolocation
- Add Markers
- Marker infoWindows
- Draw routes and circles
- Initial examples
MIT License. Copyright 2014 Gustavo Leon. https://github.com/hpneo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.