jQuery

Google Maps API - выводим карту на сайт с указанием адреса а не координат

Во время создания одного проекта связанного с арендой недвижимости возникла маленькая задачка с подключением Google Maps API. Владелец сайта создавал карточки товара (квартир) и ему необходим был вывод месторасположения квартиры на карте гугл, в одной из вкладок.

Подключив google api и перечитав их мануал я так и не нашел как же задать для вывода не координаты а именно адрес местоположения.

Давайте подготовим наш документ:




	    
	
	


	
	

Отлично. Каркас для вывода карты у нас есть. Далее напишем функцию инициализации карты и будем запускать ее при окончании загрузки страницы.

$(document).ready(function(){
        var geocoder;
        var map;
        var address = $('#address').val();
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            if (geocoder) {
                geocoder.geocode({
                    'address': address
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                            map.setCenter(results[0].geometry.location);

                            var infowindow = new google.maps.InfoWindow({
                                content: '' + address + '',
                                size: new google.maps.Size(150, 50)
                            });

                            var marker = new google.maps.Marker({
                                position: results[0].geometry.location,
                                map: map,
                                title: address
                            });
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(map, marker);
                            });

                        } else {
                            alert("No results found");
                        }
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    });

Откроем нашу страничку и увидем отмеченную маркером карту google. И не нужно открывать ее в браузере получать код для размещения на сайте и вставлять в блок.

надеюсь кому нибудь пригодится данная статья. Спасибо;)

11912 Просмотров Комментариев: 6

Denis Creative

Ответить

Когда-то подобное делал с напарником, сейчас уже не вспомнил как и где это было. Повезло, что нашел эту статью! Все четко и все работает!) Спасибо большое! Если не против, то с обратной ссылкой на Ваш сайт размещу код на своем сайте.

Евгений П.

Ответить

Пользуйтесь на здоровье. С обратной ссылкой конечно размещайте;)

Александр

Ответить

Ребят, ну какая может быть обратная ссылка? Это же стандартный способ работы с Google Maps. Давайте еще копирайты ставить на каждый if или for ))

Fr3ddy

Ответить

хорошее решение, но теперь нужны ключи апи и такой вариант работает только на локалке, без ключей и привязки к домену. просьба автору, проверить актуальность решения :) "https://maps.googleapis.com/maps/api/js?key="

Игорь

Ответить

Спасибо за скрипт! 2017 год все работает. Но нужно добавить ключ, его легко получить на сайте апи И тогда подключить так http://maps.googleapis.com/maps/api/js?key=КЛЮЧ

Дмитрий

Ответить

Спасибо! На данный момент это единственное рабочее решение.

« Предыдущая статьяКак сделать всплывающее окно с Youtube видео. Следующая статья »Массив из html в jquery и вывод случайного элемента