Created
March 14, 2018 17:53
-
-
Save fdorantesm/1d2278abfcacccc850b3c79b52e66ada to your computer and use it in GitHub Desktop.
Google maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <div id="yo" style="width: 480px; height:320px;"></div> | |
| <div id="taq" style="width: 480px; height:320px;"></div> | |
| <div id="genotipo" style="width: 480px; height:320px;"></div> | |
| <script src="maps.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkfxowwDpiHnUVH4eH4Q-X0uouplD1a9U&callback=initMap&libraries=places"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Gmap(params){ | |
| this.maps = {} | |
| if (!params.id) { | |
| console.error('El `id` del elemento es necesario para renderizar el mapa') | |
| return | |
| } | |
| else if (!document.getElementById(params.id)) { | |
| console.error(`El elemento #${params.id} no existe en el DOM`) | |
| return | |
| } | |
| params.position = params.position || {} | |
| this.id = params.id | |
| this.lat = params.position.lat || 0 | |
| this.lng = params.position.lng || 0 | |
| this.position = {lat: this.lat, lng: this.lng} | |
| this.zoom = params.zoom || 17 | |
| this.search = {} | |
| var Gmap = this | |
| Gmap.maps.map = new google.maps.Map(document.getElementById(this.id), { | |
| zoom: this.zoom | |
| }) | |
| Gmap.maps.event = google.maps.event | |
| Gmap.maps.search = {} | |
| Gmap.maps.search.input = document.createElement("input") | |
| Gmap.maps.search.input.setAttribute("id", `${this.id}-pac-input`) | |
| Gmap.maps.search.input.setAttribute("placeholder", "Escribir dirección") | |
| Gmap.maps.search.input.classList.add("pac-input") | |
| Gmap.maps.search.input.style.marginTop = "10px" | |
| Gmap.maps.search.input.style.height = "24px" | |
| Gmap.maps.search.input.style.minWidth = "200px" | |
| Gmap.maps.search.input.style.width = "50%" | |
| Gmap.maps.search.searchBox = new google.maps.places.SearchBox(Gmap.maps.search.input) | |
| Gmap.maps.map.controls[google.maps.ControlPosition.TOP_LEFT].push(Gmap.maps.search.input) | |
| Gmap.maps.map.addListener('bounds_changed', function() { | |
| Gmap.maps.search.searchBox.setBounds(this.getBounds()) | |
| }) | |
| var LocationPromise = new Promise(function(resolve, reject) { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| resolve(position) | |
| }) | |
| } | |
| else { | |
| var err = new Error('BadRequest') | |
| err.status = 400 | |
| err.message = 'El usuario no ha otorgado permisos de ubicación' | |
| reject(err) | |
| } | |
| }) | |
| var icon = { | |
| url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png", | |
| size: new google.maps.Size(32, 32), | |
| origin: new google.maps.Point(0, 0), | |
| anchor: new google.maps.Point(16, 28), | |
| scaledSize: new google.maps.Size(32, 32) | |
| }; | |
| Gmap.maps.marker = new google.maps.Marker({ | |
| map: Gmap.maps.map, | |
| icon: icon, | |
| // title: place.name, | |
| position: Gmap.position, | |
| draggable: true | |
| }) | |
| if (Gmap.lat == 0 && Gmap.lng == 0) { | |
| LocationPromise | |
| .then(function(position){ | |
| Gmap.position.lat = Gmap.lat = position.coords.latitude | |
| Gmap.position.lng = Gmap.lng = position.coords.longitude | |
| Gmap.setCoords(Gmap.position) | |
| }) | |
| .catch(function(err){ | |
| console.error(err) | |
| }) | |
| } | |
| Gmap.setCoords(Gmap.position) | |
| Gmap.maps.search.searchBox.addListener('places_changed', function() { | |
| var places = Gmap.maps.search.searchBox.getPlaces(); | |
| if (places.length == 0) { | |
| return; | |
| } | |
| var bounds = new google.maps.LatLngBounds(); | |
| places.forEach(function(place) { | |
| if (!place.geometry) { | |
| console.log("Returned place contains no geometry"); | |
| return; | |
| } | |
| Gmap.maps.marker.setPosition(place.geometry.location) | |
| Gmap.lat = place.geometry.location.lat() | |
| Gmap.lng = place.geometry.location.lng() | |
| Gmap.position = { lat: Gmap.lat, lng: Gmap.lng } | |
| if (place.geometry.viewport) { | |
| // Only geocodes have viewport. | |
| bounds.union(place.geometry.viewport) | |
| } | |
| else { | |
| bounds.extend(place.geometry.location) | |
| } | |
| }); | |
| Gmap.maps.map.fitBounds(bounds); | |
| }) | |
| Gmap.maps.marker.addListener('dragend', function () { | |
| mapUrl = this.map.rmiUrl; | |
| var request = new XMLHttpRequest(); | |
| fetch('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + this.getPosition().lat() + ',' + this.getPosition().lng() + '&key=AIzaSyASYLu_ygR7nlyy5t6qJq4N-O-HjsG12tk', {method: "POST"}) | |
| .then(function(response){ | |
| response.json().then(function(data){ | |
| var place = data.results[0] | |
| var componentForm = { | |
| postal_code: 'short_name', | |
| administrative_area_level_1: 'short_name', | |
| country: 'short_name', | |
| locality: 'short_name' | |
| } | |
| Gmap.lat = place.geometry.location.lat | |
| Gmap.lng = place.geometry.location.lng | |
| Gmap.position = { lat: Gmap.lat, lng: Gmap.lng } | |
| Gmap.maps.marker.setPosition(Gmap.position) | |
| Gmap.maps.map.setCenter({'lat':Gmap.maps.marker.getPosition().lat(),'lng':Gmap.maps.marker.getPosition().lng()}) | |
| Gmap.maps.search.input.value = place.formatted_address | |
| }) | |
| }) | |
| }) | |
| } | |
| Gmap.prototype.setZoom = function(val){ | |
| this.zoom = val | |
| this.maps.map.setZoom(val) | |
| } | |
| Gmap.prototype.setCoords = function(coords){ | |
| var {lat, lng} = coords | |
| this.lat = lat | |
| this.lng = lng | |
| this.position = coords | |
| this.maps.marker.setPosition(coords) | |
| this.maps.map.setCenter(coords) | |
| } | |
| Gmap.prototype.reset = function(){ | |
| google.maps.event.trigger(this, 'resize') | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function initMap(){ | |
| taq = new Gmap({ | |
| id: 'taq', | |
| position: { lat: 20.5813909, lng: -100.35862889999999 } | |
| }) | |
| genotipo = new Gmap({ | |
| id: 'genotipo', | |
| position : { lat: 20.5829463, lng: -100.390214 } | |
| }) | |
| yo = new Gmap({ id: "yo"}) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment