Gmap Sample

gistfile1.txt

<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;

                        }
                    }

                })
            })
        }