Wordpress에 검색 가능한지도 추가

-1

나는 fusion table과 google maps API에 대한 초보자입니다. 잘하면 대답은 간단합니다! 융합 표를 사용하여 데이터 포인트 맵을 만들고 검색 기능을 추가했습니다.Wordpress에 검색 가능한지도 추가

그러나지도가 사라지기 전에 간단히 나타납니다. "Sorry, something went wrong message"로 바뀝니다. 코드를 검토 한 결과 오류가 발생한 부분을 해결할 수 없습니다.

다른 사람이 살펴보고 변경할 필요가있는 사항을 알려주십시오. https://www.enablie.co.uk/map-test/

내 코드는 다음과 같습니다 : 여기

페이지에 대한 링크입니다

<!DOCTYPE html> 

<html> 
    <head> 
    <style> 
    #map-canvas { width:800px; height:800px; } 
    .layer-wizard-search-label { font-family: sans-serif }; 
    </style> 
    <script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    var map; 
    var layer_0; 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(52.90081096506728, -0.8806991343750425), 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     layer_0 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: "col2", 
      from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE" 
     }, 
     map: map, 
     styleId: 2, 
     templateId: 2 
     }); 
    } 
    function changeMap_0() { 
     var whereClause; 
     var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'"); 
     if (searchString != '--Select--') { 
     whereClause = "'School Name' CONTAINS IGNORING CASE '" + searchString + "'"; 
     } 
     layer_0.setOptions({ 
     query: { 
      select: "col2", 
      from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE", 
      where: whereClause 
     } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
<body> 
    <div id="map-canvas"></div> 
    <div style="margin-top: 10px;"> 
     <label class="layer-wizard-search-label"> 
     School Name 
     <input type="text" id="search-string_0"> 
     <input type="button" onclick="changeMap_0()" value="Search"> 
     </label> 
    </div> 
    </body> 
</html>

출처

2017-11-10 Lisa J

지도 초기화는 어디서 AppID가 & AppSecret입니까? 귀하의 페이지 초기화에서 이것을 사용하여 Google App에 전화해야합니다. (Google지도 API JS 참조) https://developers.google.com/maps/documentation/javascript/examples/map-simple

출처

2017-11-10 10:40:12 andrea06590

감사합니다. 당신이 옳았습니다. initMap 코드를 본문에 추가하지 않았습니다. 나는 이것을 (API 키로) 추가했고, 이제는 작동하는 것으로 보인다. –

그 이야기를 듣고 기꺼이 답을 남겨주세요.) – andrea06590

음이 브라우저에서 요소 콘솔을 검사로 이동 난 구글 API를 오류 다음 볼 수 있습니다

"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" 

"Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" 

"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error"

API 키가 비활성화되어있을 수 있으므로 https://console.cloud.google.com Google 콘솔로 이동하여 Google지도 API를 사용하도록 설정하는 것이 좋습니다.

출처

2017-11-10 10:31:10 deepak

감사합니다. Google지도 API (및 fusion table API)가 사용 가능하며 작업 키가 있습니다. 문제가 api가 코드에서 참조되지 않는다면 궁금했지만 두 가지 방법으로 시도했습니다 (googleApiKey : xxx 및 src = "https://maps.googleapis.com/maps/api/ js? key = YOUR_API_KEY & callback = initMap "), 어느 쪽도 문제를 해결하지 못했습니다. –

Wordpress에 검색 가능한지도 추가

답변

관련 문제