주소 사용자 정의 필드를 기반으로 워드 프레스에서 렌더링 Google지도

나는 많은 페이지와 함께, 각 페이지는 실제 위치를 나타내는 WordPress의 사이트가 있습니다. 이제 각 페이지에 대해 주소를 기반으로 Google지도를 표시하고 싶습니다. 지오 매시업 플러그인을 설치하여이 작업을 수행 할 수 있습니다. http://wordpress.org/extend/plugins/geo-mashup/하지만 그 작업은 수동으로 모든 게시물에 대해 주소를 기반으로 위치를 만들고 게시물/페이지에 단축 코드를 추가해야합니다. 구글지도. 수백 개의 위치가있는이 사이트에 대한 많은 작업입니다.주소 사용자 정의 필드를 기반으로 워드 프레스에서 렌더링 Google지도

나는

A를 수 있도록하고 싶습니다 :에 "주소 사용자 정의 필드"프로그래밍 각 게시물에 대한 을 만듭니다.
B : 에서 페이지 템플릿은 사용자 정의 필드 을 사용하여 Google지도를 렌더링합니다.

A는 쉽지만 B?

출처

2010-02-19 windyjonas

Google Maps API을 사용해보십시오.

다음 예는 시작하는 데 도움이 될 수 있습니다. 자바 스크립트 변수 yourAddress을 페이지의 위치 기능 주소로 변경하면됩니다. "쉬운 일이라면"그것은 아주 솔직해야합니다.

<!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 Client-side Geocoder이 주소에서 좌표를 retreive 수없는 경우

Render google map in wordpress, based on address custom field http://img716.imageshack.us/img716/7267/london.jpg

지도가 표시되지 않습니다.

출처

2010-02-19 15:58:38

감사와 같은

사용 무언가, 즉 완벽합니다. Google Maps API 키를 자바 스크립트 호출에 get 매개 변수로 추가해야한다는 것을 알았습니다. (key = ) – windyjonas

@windyjonas : 최신 버전의지도 API (v3)를 사용하는 경우 키가 필요하지 않습니다. –

우수하고 간결한 예제 – prusswan

이것은 현재 Google에서 v2에 대해 제거 된 서비스입니다. 이

<!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>

출처

2012-04-24 19:56:25 Sashi

예제에서 주소를 어떻게 사용합니까? – windyjonas

주소 사용자 정의 필드를 기반으로 워드 프레스에서 렌더링 Google지도

답변

관련 문제