Рендеринг карты Google в WordPress на основе настраиваемого поля адреса - PullRequest
Новая
       11

Рендеринг карты Google в WordPress на основе настраиваемого поля адреса

2 голосов
/ 19 февраля 2010

У меня есть сайт WordPress с большим количеством страниц, каждая страница представляет собой физическое местоположение. Теперь для каждой страницы я хотел бы отобразить карту Google на основе адреса. Я знаю, что могу сделать это, установив, например, плагин Geo Mashup http://wordpress.org/extend/plugins/geo-mashup/, но для этого требуется (я полагаю), что я вручную для каждого поста создаю местоположение на основе адреса и добавляю шорткод к посту / страница, которая приводит к карте Google. Это много работы для этого сайта с сотнями мест.

Я бы хотел иметь возможность

A: Создать "адресное поле" для каждого поста программно.
Б: В шаблон страницы использовать это настраиваемое поле сделать карту Google.

А это легко, а Б?

Ответы [ 2 ]

6 голосов
/ 19 февраля 2010

Возможно, вы захотите использовать Google Maps API .

Следующий пример может помочь вам начать работу. Все, что вам нужно сделать, это изменить переменную JavaScript yourAddress на адрес функции местоположения на вашей странице. «Если A легко», это должно быть довольно просто. 

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var yourAddress = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(yourAddress, function (locations) {         
          if (locations.Placemark)
          {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
          }
       });
    }
    </script> 
  </body> 
</html>

Приведенный выше пример отображает карту, подобную приведенной ниже:

Визуализация карты Google в WordPress на основе настраиваемого поля адреса http://img716.imageshack.us/img716/7267/london.jpg

Карта не будет отображаться, если Клиентский геокодер Google не сможет получить координаты с адреса.

1 голос
/ 24 апреля 2012

Это теперь устаревшие сервисы, удаленные Google для версии 2.

Используйте что-то вроде этого 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...