Created
July 8, 2019 08:51
-
-
Save fofotara/0f3835d4db658a99a40ffea4ae4722ba to your computer and use it in GitHub Desktop.
Gmap Sample
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
| <script src="//maps.googleapis.com/maps/api/js?key=API_KEY_YAZILACAK&libraries=places,geometry&language=tr"></script> | |
| function initialize() { | |
| var mapOptions = { | |
| center: new google.maps.LatLng(38.963745, 35.243322000000035), | |
| zoom: 4, | |
| mapTypeId: google.maps.MapTypeId.HYBRID, | |
| mapTypeControl: false, | |
| panControl: false, | |
| streetViewControl: false, | |
| zoomControl: true, | |
| }; | |
| var map = new google.maps.Map(document.getElementById('map-canvas'), | |
| mapOptions); | |
| var input = /** @type {HTMLInputElement} */( | |
| document.getElementById('adres')); | |
| var types = document.getElementById('type-selector'); | |
| // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | |
| // map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); | |
| var autocomplete = new google.maps.places.Autocomplete(input); | |
| autocomplete.bindTo('bounds', map); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var marker = new google.maps.Marker({ | |
| map: map | |
| }); | |
| google.maps.event.addListener(autocomplete, 'place_changed', function () { | |
| infowindow.close(); | |
| marker.setVisible(false); | |
| var place = autocomplete.getPlace(); | |
| if (!place.geometry) { | |
| return; | |
| } | |
| // If the place has a geometry, then present it on a map. | |
| if (place.geometry.viewport) { | |
| map.fitBounds(place.geometry.viewport); | |
| map.setZoom(17); // Why 17? Because it looks good. | |
| } else { | |
| map.setCenter(place.geometry.location); | |
| map.setZoom(17); // Why 17? Because it looks good. | |
| } | |
| marker.setIcon(/** @type {google.maps.Icon} */({ | |
| url: place.icon, | |
| size: new google.maps.Size(71, 71), | |
| origin: new google.maps.Point(0, 0), | |
| anchor: new google.maps.Point(17, 34), | |
| scaledSize: new google.maps.Size(35, 35) | |
| })); | |
| marker.setPosition(place.geometry.location); | |
| marker.setVisible(true); | |
| var address = ''; | |
| if (place.address_components) { | |
| address = [ | |
| (place.address_components[0] && place.address_components[0].short_name || ''), | |
| (place.address_components[1] && place.address_components[1].short_name || ''), | |
| (place.address_components[2] && place.address_components[2].short_name || '') | |
| ].join(' '); | |
| } | |
| infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); | |
| infowindow.open(map, marker); | |
| console.log(place.geometry.location.lat()); | |
| document.getElementById("location").value = place.geometry.location.lat() + ', ' + place.geometry.location.lng(); | |
| }); | |
| // Sets a listener on a radio button to change the filter type on Places | |
| // Autocomplete. | |
| /* | |
| function setupClickListener(id, types) { | |
| var radioButton = document.getElementById(id); | |
| google.maps.event.addDomListener(radioButton, 'click', function() { | |
| autocomplete.setTypes(types); | |
| }); | |
| } | |
| setupClickListener('changetype-establishment', ['establishment']); | |
| setupClickListener('changetype-geocode', ['geocode']); | |
| setupClickListener('changetype-all', []); | |
| */ | |
| var geocoder = new google.maps.Geocoder(); | |
| google.maps.event.addListener(map, 'click', function (event) { | |
| var latitude = event.latLng.lat(); | |
| var longitude = event.latLng.lng(); | |
| console.log(latitude + ', ' + longitude); | |
| document.getElementById("location").value = latitude + ', ' + longitude; | |
| geocoder.geocode({ | |
| 'latLng': event.latLng | |
| }, function (result, status) { | |
| if (status === google.maps.GeocoderStatus.OK) { | |
| if (result[0]) { | |
| // alert(result[0].formatted_address); | |
| document.getElementById("adres").value = result[0].formatted_address; | |
| } | |
| } | |
| }) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment