forxtu
9/14/2017 - 11:51 AM

Google map

<script>
        var map;
        $(document).ready(function () {
            var marker = null;

            function initialize() {
                var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(51.30, 0.7),
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(51.30, 0.7),
                    map: map
                });
                google.maps.event.addListener(map, 'click', function (event) {
                    marker.setPosition(event.latLng);
                });
                $(function () {
                    var input = document.getElementById('map__your-place-input');
                    var autocomplete = new google.maps.places.Autocomplete(input);
                    google.maps.event.addListener(autocomplete, 'place_changed', function () {
                        var place = autocomplete.getPlace();
                        console.log(place);
                    });
                });
                function geolocationOnClick()
                {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function (position) {
                            var pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };
                            marker.setPosition(pos);
                            map.setCenter(pos);
                        }, function (x) {
                            console.log(x)
                            toastr.info('Navigation service is off or you disallowed it.')
                        });
                    } else {
                        toastr.info('Are you using older version without HTML5')
                    }
                }
                $('#gMapsButton').click(function () { setTimeout(function () { google.maps.event.trigger(map, 'resize') }, 500); });
                $('#map__select-location').click(geolocationOnClick);
            }
            initialize();
        });
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFW7gU2oTMvvjuQxdE1IiVuArp0DqIT1s&libraries=places">