├── .gitignore ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | */.DS_Store 3 | */node_modules/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Geocoder 2 | A vue.js plugin to interact with Google Maps API. See it on [npmjs](https://www.npmjs.com/package/@pderas/vue2-geocoder). 3 | 4 | # Installation 5 | ```npm install --save @pderas/vue2-geocoder``` 6 | 7 | ## How to initialize Vue Geocoder 8 | A vue 2 plugin to interact with google maps api that will query the google maps API to retrieve location results. 9 | 10 | ```javascript 11 | import Geocoder from "@pderas/vue2-geocoder"; 12 | 13 | Vue.use(Geocoder, { 14 | defaultCountryCode: null, // e.g. 'CA' 15 | defaultLanguage: null, // e.g. 'en' 16 | defaultMode: 'address', // or 'lat-lng' 17 | googleMapsApiKey: GOOGLE_MAPS_API_KEY 18 | }); 19 | ``` 20 | ## Usage 21 | General usage: ```Vue.$geocoder.[FUNCTION_NAME]``` 22 | 23 | ##### Address Example 24 | ```javascript 25 | Vue.$geocoder.setDefaultMode('address'); // this is default 26 | var addressObj = { 27 | address_line_1: '1600 Amphitheatre Parkway', 28 | address_line_2: '', 29 | city: 'Mountain View', 30 | state: 'CA', // province also valid 31 | zip_code: '94043', // postal_code also valid 32 | country: 'United States' 33 | } 34 | Vue.$geocoder.send(addressObj, response => { console.log(response) }); 35 | ``` 36 | 37 | Its important to note that even if your country is set in the address object to the specified country, it is still possible to pull results from other countries. If you want to limit the results to a specific country, you must set the country code in the geocoder. 38 | ```javascript 39 | Vue.$geocoder.setDefaultCountryCode('CA'); 40 | ``` 41 | [Click here for Country Codes](https://developers.google.com/maps/coverage) 42 | 43 | ##### Lat Lng Example 44 | ```javascript 45 | Vue.$geocoder.setDefaultMode('lat-lng'); 46 | var latLngObj = { 47 | lat: 37.421512, 48 | lng: -122.084101 49 | } 50 | Vue.$geocoder.send(latLngObj, response => { console.log(response) }); 51 | ``` 52 | 53 | ##### Language 54 | To get result in your language you should set language code in the geocoder 55 | ```javascript 56 | Vue.$geocoder.setDefaultLanguage('en') // this is default 57 | ``` 58 | 59 | ## License 60 | This project is covered under the MIT License. Feel free to use it wherever you like. 61 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | install(Vue, options) { 3 | Vue.$geocoder = Vue.prototype.$geocoder = { 4 | defaultCountryCode: options.defaultCountryCode || null, 5 | defaultLanguage: options.defaultLanguage || null, 6 | defaultMode: options.defaultMode == 'lat-lng' ? 'lat-lng' : 'address', 7 | googleMapsApiKey: options.googleMapsApiKey, 8 | googleMapsUrl: 'https://maps.googleapis.com/maps/api/geocode/json', 9 | 10 | createRequestObject(url, callback = null) { 11 | var xhr = new XMLHttpRequest(); 12 | 13 | /* Register callback functions */ 14 | xhr.onreadystatechange = function() { 15 | if (xhr.readyState == 4 && xhr.status == 200) { 16 | if (callback) { 17 | callback(xhr.response); 18 | } 19 | } 20 | } 21 | 22 | xhr.responseType = "json"; 23 | xhr.open("GET", url); 24 | 25 | return xhr; 26 | }, 27 | 28 | getDefaultUrl() { 29 | var url = this.googleMapsUrl; 30 | 31 | url += "?key=" + encodeURIComponent(this.googleMapsApiKey); 32 | if (this.defaultCountryCode) { 33 | url += "&components=country:" + this.defaultCountryCode; 34 | } 35 | if (this.defaultLanguage) { 36 | url += "&language=" + this.defaultLanguage; 37 | } 38 | 39 | return url; 40 | }, 41 | 42 | send(dataObj, callback = null) { 43 | switch (this.defaultMode) { 44 | case 'lat-lng': 45 | this.getGoogleResponseFromLatLng(dataObj, callback); 46 | break; 47 | 48 | case 'address': 49 | default: 50 | this.getGoogleResponseFromAddress(dataObj, callback); 51 | break; 52 | } 53 | }, 54 | 55 | getGoogleResponseFromAddress(locationObj, callback = null) { 56 | var address = this.toAddressString(locationObj); 57 | var url = this.getDefaultUrl(); 58 | 59 | /* Add query parameters */ 60 | url += "&address=" + encodeURIComponent(address); 61 | 62 | var xhr = this.createRequestObject(url, callback) 63 | xhr.send(); 64 | }, 65 | 66 | getGoogleResponseFromLatLng(latLngObj, callback = null) { 67 | var url = this.getDefaultUrl(); 68 | 69 | /* Add query parameters */ 70 | url += "&latlng=" + encodeURIComponent(latLngObj.lat) + "," + encodeURIComponent(latLngObj.lng); 71 | 72 | var xhr = this.createRequestObject(url, callback) 73 | xhr.send(); 74 | }, 75 | 76 | toAddressString(locationObj) { 77 | var addressStr = ''; 78 | if (locationObj) { 79 | addressStr += locationObj.address_line_1 ? locationObj.address_line_1 + ' ' : ''; 80 | addressStr += locationObj.address_line_2 ? locationObj.address_line_2 + ' ' : ''; 81 | addressStr += locationObj.city ? locationObj.city + ', ' : ''; 82 | if (locationObj.province || locationObj.postal_code) { 83 | addressStr += locationObj.province ? locationObj.province + ', ' : ''; 84 | addressStr += locationObj.postal_code ? locationObj.postal_code + ', ' : ''; 85 | } else { 86 | addressStr += locationObj.state ? locationObj.state + ', ' : ''; 87 | addressStr += locationObj.zip_code ? locationObj.zip_code + ', ' : ''; 88 | } 89 | addressStr += locationObj.country ? locationObj.country: ''; 90 | } 91 | return addressStr; 92 | }, 93 | 94 | setDefaultCountryCode(code) { 95 | this.defaultCountryCode = code; 96 | }, 97 | 98 | setDefaultLanguage(code) { 99 | this.defaultLanguage = code; 100 | }, 101 | 102 | setDefaultMode(mode) { 103 | this.defaultMode = mode == 'address' ? mode : 'lat-lng'; 104 | }, 105 | 106 | setGoogleMapsApiKey(key) { 107 | this.googleMapsApiKey = key; 108 | }, 109 | 110 | getDefaultCountryCode() { 111 | return this.defaultCountryCode; 112 | }, 113 | 114 | getDefaultLanguage() { 115 | return this.defaultLanguage; 116 | }, 117 | 118 | getDefaultMode() { 119 | return this.defaultMode; 120 | }, 121 | 122 | getGoogleMapsApiKey() { 123 | return this.googleMapsApiKey; 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pderas/vue2-geocoder", 3 | "version": "1.1.0", 4 | "description": "A vue 2 plugin to interact with google maps api", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/PDERAS/vue2-geocoder.git" 12 | }, 13 | "keywords": [ 14 | "vue2", 15 | "vue2js", 16 | "vue2geocoder", 17 | "vue2-geocoder", 18 | "geocoder", 19 | "googlemaps", 20 | "maps", 21 | "google" 22 | ], 23 | "author": "Cody Moorhouse", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/PDERAS/vue2-geocoder/issues" 27 | }, 28 | "homepage": "https://github.com/PDERAS/vue2-geocoder#readme" 29 | } 30 | --------------------------------------------------------------------------------