30 09 10 Mapy Google w Wordpresie

Jak zawsze dodany przez : Sylwek, komentarze: ( 1 )

Mapom Google stuknęło właśnie 5 lat. Pomyślałem więc sobie, że napiszę krótki wpis o tym, jak w kilka chwil umieścić taką mapkę na stronie witryny opartej o Wordpresa.

W wielu przypadkach wyświetlenie mapy Google jest na tyle trywialne, że nie warto zawracać sobie głowy instalacją i utrzymaniem kolejnej wtyczki, która tylko dodatkowo obciąża i tak dość wymagającego Wordpresa.

Technicznie rzecz ujmując, aby umieścić mapę Google na stronie, potrzebny będzie kontener na nią, jedna funkcja PHP oraz jeden skrypt JavaScript. Usługa Google maps wymaga także klucza, który można uzyskać na tej stronie.

Zacznijmy od stworzenia strony dla mapki. Aby tego dokonać należy zalogować się do panelu administracyjnego witryny i dodać nową stronę zapamiętując jej numer id. Dla strony należy stworzyć plik o nazwie page-id.php, gdzie zamiast id wstawiamy numer strony i zapisać go w głównym katalogu aktywnego motywu. W moim przypadku, strona ma id 83, zapisałem więc plik o nazwie page-83.php

Czas zająć się dodaniem dwóch skryptów javaScript do nagłówka witryny, do czego posłuży kod przedstawiony poniżej.

add_action('wp_print_scripts','print_google_maps_scripts');
function print_google_maps_scripts(){
  // tu wstaw numer id swojej strony
  $page_id = 83;
  // tu wstaw klucz do API
  $api_key='ABQIAAAAfHU80GhVl-YJYsFiu2I91xRBnHeVEHPhJjdB-r2j2wBq ...'
  if(is_page($page_id)){
    wp_enqueue_script('google_maps_api','http://maps.google.com/maps/api/js?sensor=false&key='.$api_key);
    wp_enqueue_script('google_maps_init',get_bloginfo('template_directory') . '/js/init_map.js');
  }
}

Kod należy dodać do pliku functions.php i uzupełnić wstawiając numer strony oraz klucz do API.

Następnym krokiem jest stworzenie pliku init_map.js w katalogu js/ aktywnego motywu Wordpresa i dodanie do niego kodu javaScript jak poniżej:

function initialize_google_map() {
  var latlng = new google.maps.LatLng(52.0,22.0);
  var myOptions = {
    zoom: 6,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title:''
  });
  var infowindow = new google.maps.InfoWindow({
    content:'<p>Gdzieś na południowy wschód od Warszawy</p>'
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map,marker);
  });
}

window.onload = function(){
  initialize_google_map();
}

Powyższy kod uruchamia pojedyńcza mapkę, dodaje do niej jeden znaczik i jedno okienko informacyjne, które zostanie pokazane po najechaniu na niego myszką. To przykładowy kod, modyfikacje w zależności do potrzeb są bardziej niż wskazane.
Koordynaty dla miejsca można uzyskać na przykład na tej stronie.

Mapka zostanie umieszczona w blokowym elemencie HTML o id &map_container&. Pozostaję go więc dodać do strony. Otwieramy plik strony, który stworzyliśmy wyżej i wrzucamy do niego kod jak następuje:

<div id="map_container" style = "width:500px;height:300px;border:1px solid #ddd">
</div>

Kod generuje mapę jak na rysunku:


Kliknij aby powiększyć

Jak można zauważyć, w aspekcie technicznym, dodanie mapy Google do strony nie jest zbyt skomplikowane.
Jeżeli potrzebujemy więcej mapek, konfiguracji, bardziej zaawansowanych opcji, wówczas dobrym rozwiązaniem jest skorzystaniem z wtyczki o nazwie google-maps-for-wordpress, którą można ściągnąć z repozytorium wtyczek dla Wordpresa.

Kategorie: wordpress
Tagi: usługi google