Выводим в записях карту Google используя только адрес без координат

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

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

По итогу нужно внести изменения только в два файла — header.php и single.php, и подключить несколько скриптов.

В файл header.php подключаем необходимые скрипты:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.11.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/googlemap.js"></script>

В скрипт googlemap.js запишем функцию инициализации карты, которая будет запускать ее после окончания загрузки страницы:

$(document).ready(function(){
        var geocoder;
        var map;
        var address = $('#address').val();
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(45.0392674, 38.987221);
            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: '<b>' + address + '</b>',
                                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);
    });

В файле single.php выводим карту после основного контента:

<input id="address" value="<?php the_field('address');?>" type="hidden">
<div style=" width: 100%; height: 400px;" id="map_canvas"></div>

Где <?php the_field(‘address’); ?> — это вывод адреса из доп. поля.

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