wordpress Kind Thema Google Karte api Google Orte

Question

Ich habe eine Website, die ich arbeite, und ich versuche, eine benutzerdefinierte Kind Thema zu erstellen. Ich habe eine HTML-Version des Themas auf einem Test-Server, aber wenn ich das CSS spalte, Javascript aus und legen Sie sie in einem benutzerdefinierten Kind Thema und legen Sie den HTML-Code in einem Post. Ich zeige das geladene Javascript, aber die Seite funktioniert nicht richtig. Es sieht so aus, als ob das Javascript nicht aufgerufen wird.

Ich versuche, etwas wie diese Google-Karte mit Orten, die als meine Landing Page arbeiten.

https://developers.google.com/maps/documentation/javascript/examples/full/places-autocomplete-hotelsearch

Jede Beratung oder Hilfe würde geschätzt.

Ich versuche immer noch herauszufinden, wie man das zum Laufen bringt.

Ich habe einen Test-Server-Setup auf http://104.236.207.225/

ich die folgende Fehlermeldung zu bekommen.

Nachricht : „initMap ist keine Funktion“ Name : „InvalidValueError“ Stapel : „Error↵

Hier ist der Code in der wordpresspost.

<div id="findhotel">Find hotels in:</div> 
<div id="locationField"><input id="autocomplete" type="text" placeholder="Enter a city" /></div> 
<div id="controls"><select id="country"> 
<option value="all">All</option> 
<option value="au">Australia</option> 
<option value="br">Brazil</option> 
<option value="ca">Canada</option> 
<option value="fr">France</option> 
<option value="de">Germany</option> 
<option value="mx">Mexico</option> 
<option value="nz">New Zealand</option> 
<option value="it">Italy</option> 
<option value="za">South Africa</option> 
<option value="es">Spain</option> 
<option value="pt">Portugal</option> 
<option selected="selected" value="us">U.S.A.</option> 
<option value="uk">United Kingdom</option> 
</select></div> 
<div id="map"></div> 
<div id="listing"></div> 
<div style="display: none;"> 
<div id="info-content"> 
<table> 
<tbody> 
<tr id="iw-url-row" class="iw_table_row"> 
<td id="iw-icon" class="iw_table_icon"></td> 
<td id="iw-url"></td> 
</tr> 
<tr id="iw-address-row" class="iw_table_row"> 
<td class="iw_attribute_name">Address:</td> 
<td id="iw-address"></td> 
</tr> 
<tr id="iw-phone-row" class="iw_table_row"> 
<td class="iw_attribute_name">Telephone:</td> 
<td id="iw-phone"></td> 
</tr> 
<tr id="iw-rating-row" class="iw_table_row"> 
<td class="iw_attribute_name">Rating:</td> 
<td id="iw-rating"></td> 
</tr> 
<tr id="iw-website-row" class="iw_table_row"> 
<td class="iw_attribute_name">Website:</td> 
<td id="iw-website"></td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 

Die hotelloc.js Datei

// This example uses the autocomplete feature of the Google Places API. 
    // It allows the user to find all hotels in a given place, within a given 
    // country. It then displays markers for all the hotels returned, 
    // with on-click details for each hotel. 

    // This example requires the Places library. Include the libraries=places 
    // parameter when you first load the API. For example: 
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

    var map, places, infoWindow; 
    var markers = []; 
    var autocomplete; 
    var countryRestrict = {'country': 'us'}; 
    var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green'; 
    var hostnameRegexp = new RegExp('^https?://.+?/'); 

    var countries = { 
    'au': { 
     center: {lat: -25.3, lng: 133.8}, 
     zoom: 4 
    }, 
    'br': { 
     center: {lat: -14.2, lng: -51.9}, 
     zoom: 3 
    }, 
    'ca': { 
     center: {lat: 62, lng: -110.0}, 
     zoom: 3 
    }, 
    'fr': { 
     center: {lat: 46.2, lng: 2.2}, 
     zoom: 5 
    }, 
    'de': { 
     center: {lat: 51.2, lng: 10.4}, 
     zoom: 5 
    }, 
    'mx': { 
     center: {lat: 23.6, lng: -102.5}, 
     zoom: 4 
    }, 
    'nz': { 
     center: {lat: -40.9, lng: 174.9}, 
     zoom: 5 
    }, 
    'it': { 
     center: {lat: 41.9, lng: 12.6}, 
     zoom: 5 
    }, 
    'za': { 
     center: {lat: -30.6, lng: 22.9}, 
     zoom: 5 
    }, 
    'es': { 
     center: {lat: 40.5, lng: -3.7}, 
     zoom: 5 
    }, 
    'pt': { 
     center: {lat: 39.4, lng: -8.2}, 
     zoom: 6 
    }, 
    'us': { 
     center: {lat: 37.1, lng: -95.7}, 
     zoom: 3 
    }, 
    'uk': { 
     center: {lat: 54.8, lng: -4.6}, 
     zoom: 5 
    } 
    }; 

    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: countries['us'].zoom, 
     center: countries['us'].center, 
     mapTypeControl: false, 
     panControl: false, 
     scaleControl: false, 
     zoomControl: false, 
     streetViewControl: false, 

    // center: {lat: -34.397, lng: 150.644}, 
    zoom: 12 
    }); 
    infoWindow = new google.maps.InfoWindow({ 
     content: document.getElementById('info-content') 
    }); 


    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     //infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 


     // Create the autocomplete object and associate it with the UI input control. 
     // Restrict the search to the default country, and to place type "cities". 

    // Create the autocomplete object and associate it with the UI input control. 
    // Restrict the search to the default country, and to place type "cities". 
     autocomplete = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */ (
      document.getElementById('autocomplete')), { 
      types: ['(cities)'], 
      componentRestrictions: countryRestrict 
     }); 

     places = new google.maps.places.PlacesService(map); 

     autocomplete.addListener('place_changed', onPlaceChanged); 

       // Add a DOM event listener to react when the user selects a country. 
     document.getElementById('country').addEventListener(
     'change', setAutocompleteCountry); 


     search(); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

    // When the user selects a city, get the place details for the city and 
    // zoom the map in on the city. 
    function onPlaceChanged() { 
    var place = autocomplete.getPlace(); 

    if (place.geometry) { 
     map.panTo(place.geometry.location); 
     map.setZoom(12); 
     search(); 
    } else { 
     document.getElementById('autocomplete').placeholder = 'Enter a city'; 
    } 

    } 



    // Search for hotels in the selected city, within the viewport of the map. 
    function search() { 
    var search = { 
     bounds: map.getBounds(), 
     types: ['hotel'] 
    }; 
    console.log("search " + search); 
    console.log("bounds " + map.getBounds()); 
    places.nearbySearch(search, function(results, status) { 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
     clearResults(); 
     clearMarkers(); 
     // Create a marker for each hotel found, and 
     // assign a letter of the alphabetic to each marker icon. 
     for (var i = 0; i < results.length; i++) { 
      var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i); 
      var markerIcon = MARKER_PATH + markerLetter + '.png'; 
      // Use marker animation to drop the icons incrementally on the map. 
      markers[i] = new google.maps.Marker({ 
      position: results[i].geometry.location, 
      animation: google.maps.Animation.DROP, 
      icon: markerIcon 
      }); 
      // If the user clicks a hotel marker, show the details of that hotel 
      // in an info window. 
      markers[i].placeResult = results[i]; 
      console.log("call showInfoWindow"); 
      google.maps.event.addListener(markers[i], 'click', showInfoWindow); 
      setTimeout(dropMarker(i), i * 100); 
      addResult(results[i], i); 
     } 
     } 
    }); 
    } 

    function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
     if (markers[i]) { 
     markers[i].setMap(null); 
     } 
    } 
    markers = []; 
    } 

    // Set the country restriction based on user input. 
    // Also center and zoom the map on the given country. 
    function setAutocompleteCountry() { 
    var country = document.getElementById('country').value; 
    if (country == 'all') { 
     autocomplete.setComponentRestrictions([]); 
     map.setCenter({lat: 15, lng: 0}); 
     map.setZoom(2); 
    } else { 
     autocomplete.setComponentRestrictions({'country': country}); 
     map.setCenter(countries[country].center); 
     map.setZoom(countries[country].zoom); 
    } 
    clearResults(); 
    clearMarkers(); 
    } 

    function dropMarker(i) { 
    return function() { 
     markers[i].setMap(map); 
    }; 
    } 

    function addResult(result, i) { 
    var results = document.getElementById('results'); 
    var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i); 
    var markerIcon = MARKER_PATH + markerLetter + '.png'; 

    var tr = document.createElement('tr'); 
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF'); 
    tr.onclick = function() { 
     google.maps.event.trigger(markers[i], 'click'); 
    }; 

    var iconTd = document.createElement('td'); 
    var nameTd = document.createElement('td'); 
    var icon = document.createElement('img'); 
    icon.src = markerIcon; 
    icon.setAttribute('class', 'placeIcon'); 
    icon.setAttribute('className', 'placeIcon'); 
    var name = document.createTextNode(result.name); 
    iconTd.appendChild(icon); 
    nameTd.appendChild(name); 
    tr.appendChild(iconTd); 
    tr.appendChild(nameTd); 
    results.appendChild(tr); 
    } 

    function clearResults() { 
    var results = document.getElementById('results'); 
    while (results.childNodes[0]) { 
     results.removeChild(results.childNodes[0]); 
    } 
    } 

    // Get the place details for a hotel. Show the information in an info window, 
    // anchored on the marker for the hotel that the user selected. 
    function showInfoWindow() { 
    var marker = this; 
    places.getDetails({placeId: marker.placeResult.place_id}, 
     function(place, status) { 
      if (status !== google.maps.places.PlacesServiceStatus.OK) { 
      return; 
      } 
      infoWindow.open(map, marker); 
      //place.url ="https://uorder.us"; 
      console.log("placeId "+ marker.placeResult.place_id); 
      buildIWContent(place); 

     }); 
    } 

    // Load the place information into the HTML elements used by the info window. 
    function buildIWContent(place) { 

    document.getElementById('iw-icon').innerHTML = '<img class="hotelIcon" ' + 
     'src="' + place.icon + '"/>'; 
    document.getElementById('iw-url').innerHTML = '<b><a href="' + place.url + 
     '">' + place.name + '</a></b>'; 
    document.getElementById('iw-address').textContent = place.vicinity; 

    if (place.formatted_phone_number) { 
     document.getElementById('iw-phone-row').style.display = ''; 
     document.getElementById('iw-phone').textContent = 
      place.formatted_phone_number; 
    } else { 
     document.getElementById('iw-phone-row').style.display = 'none'; 
    } 

    // Assign a five-star rating to the hotel, using a black star ('&#10029;') 
    // to indicate the rating the hotel has earned, and a white star ('&#10025;') 
    // for the rating points not achieved. 
    if (place.rating) { 
     var ratingHtml = ''; 
     for (var i = 0; i < 5; i++) { 
     if (place.rating < (i + 0.5)) { 
      ratingHtml += '&#10025;'; 
     } else { 
      ratingHtml += '&#10029;'; 
     } 
     document.getElementById('iw-rating-row').style.display = ''; 
     document.getElementById('iw-rating').innerHTML = ratingHtml; 
     } 
    } else { 
     document.getElementById('iw-rating-row').style.display = 'none'; 
    } 

    // The regexp isolates the first part of the URL (domain plus subdomain) 
    // to give a short URL for displaying in the info window. 
    if (place.website) { 
     var fullUrl = place.website; 
     var website = hostnameRegexp.exec(place.website); 
     if (website === null) { 
     website = 'http://' + place.website + '/'; 
     fullUrl = website; 
     } 
     document.getElementById('iw-website-row').style.display = ''; 
     document.getElementById('iw-website').textContent = website; 
    } else { 
     document.getElementById('iw-website-row').style.display = 'none'; 
    } 
    } 

die function.php

<?php 
function my_theme_enqueue_styles() { 

    $parent_style = 'parent-style'; // This is 'StanleyWP-style' for the StanleyWP-child. 

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css'); 

} 
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); 
?> 

<?php 

function theme_js() { 

    wp_register_script('gmap', '//maps.googleapis.com/maps/api/js?key=AIzaSyDb3ltGiSsOuY1LjK-jdUG4eDy97bN9H2g&libraries=places&callback=initMap', array ('jquery'), '1.0', true); 

    wp_enqueue_script('theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array('gmap'), '1.0', true); 


} 

add_action('get_footer', 'theme_js'); 


?> 

und die sytle.css Datei

/* 
Theme Name: stanleywp-child 
Theme URI: http://example.com/twenty-fifteen-child/ 
Description: Twenty Fifteen Child Theme 
Author:  John Doe 
Author URI: http://example.com 
Template:  stanleywp 
Version:  1.0.0 
License:  GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Tags:   light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready 
Text Domain: stanleywp 

*/

0123-Datei

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #map { 
    height: 100%; 
    width:100%; 
    } 
    table { 
    font-size: 12px; 
    } 
    #listing { 
    width: 440px; 
    height: 900px; 
    overflow: auto; 
    left: 442px; 
    top: 0px; 
    cursor: pointer; 
    overflow-x: hidden; 
    } 
    #findhotelss { 
    position: absolute; 
    text-align: right; 
    width: 100px; 
    font-size: 14px; 
    padding: 4px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #locationField { 
    position: absolute; 
    width: 190px; 
    height: 25px; 
    left: 108px; 
    top: 0px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #controls { 
    position: absolute; 
    left: 300px; 
    width: 140px; 
    top: 0px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #autocomplete { 
    width: 100%; 
    } 
    #country { 
    width: 100%; 
    } 
    .placeIcon { 
    width: 20px; 
    height: 34px; 
    margin: 4px; 
    } 
    .hotelIcon { 
    width: 24px; 
    height: 24px; 
    } 
    #resultsTable { 
    border-collapse: collapse; 
    width: 240px; 
    } 
    #rating { 
    font-size: 13px; 
    font-family: Arial Unicode MS; 
    } 
    .iw_table_row { 
    height: 18px; 
    } 
    .iw_attribute_name { 
    font-weight: bold; 
    text-align: right; 
    } 
    .iw_table_icon { 
    text-align: right; 
    } 

Dank

Answer 1

ich heraus, schließlich dachte, wie die Karte zu bekommen richtig zu laden.

Ich hatte einen Fehler in meinem HTML. Hier ist das korrekte HTML.

!DOCTYPE html> 
<html> 
<head> 
<title>Place Autocomplete Hotel Search</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

</head> 

<body> 

<div id="findhotels"> 
    Find hotels in: 
</div> 

<div id="locationField"> 
    <input id="autocomplete" placeholder="Enter a city" type="text" /> 
</div> 

<div id="controls"> 
    <select id="country"> 
    <option value="all">All</option> 
    <option value="au">Australia</option> 
    <option value="br">Brazil</option> 
    <option value="ca">Canada</option> 
    <option value="fr">France</option> 
    <option value="de">Germany</option> 
    <option value="mx">Mexico</option> 
    <option value="nz">New Zealand</option> 
    <option value="it">Italy</option> 
    <option value="za">South Africa</option> 
    <option value="es">Spain</option> 
    <option value="pt">Portugal</option> 
    <option value="us" selected>U.S.A.</option> 
    <option value="uk">United Kingdom</option> 
    </select> 
</div> 

<div id="map"></div> 

<div id="listing"> 
    <table id="resultsTable"> 
    <tbody id="results"></tbody> 
    </table> 
</div> 

<div style="display: none"> 
    <div id="info-content"> 
    <table> 
     <tr id="iw-url-row" class="iw_table_row"> 
     <td id="iw-icon" class="iw_table_icon"></td> 
     <td id="iw-url"></td> 
     </tr> 
     <tr id="iw-address-row" class="iw_table_row"> 
     <td class="iw_attribute_name">Address:</td> 
     <td id="iw-address"></td> 
     </tr> 
     <tr id="iw-phone-row" class="iw_table_row"> 
     <td class="iw_attribute_name">Telephone:</td> 
     <td id="iw-phone"></td> 
     </tr> 
     <tr id="iw-rating-row" class="iw_table_row"> 
     <td class="iw_attribute_name">Rating:</td> 
     <td id="iw-rating"></td> 
     </tr> 
     <tr id="iw-website-row" class="iw_table_row"> 
     <td class="iw_attribute_name">Website:</td> 
     <td id="iw-website"></td> 
     </tr> 
    </table> 
    </div> 
</div> 

Ich habe die Höhe der Karte div von 100% auf 500px geändert.

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #map { 
    height: 500px; 
    width:100%; 
    } 
    table { 
    font-size: 12px; 
    } 
    #listing { 
    width: 440px; 
    height: 900px; 
    overflow: auto; 
    left: 442px; 
    top: 0px; 
    cursor: pointer; 
    overflow-x: hidden; 
    } 
    #findhotelss { 
    position: absolute; 
    text-align: right; 
    width: 100px; 
    font-size: 14px; 
    padding: 4px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #locationField { 
    position: absolute; 
    width: 190px; 
    height: 25px; 
    left: 108px; 
    top: 0px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #controls { 
    position: absolute; 
    left: 300px; 
    width: 140px; 
    top: 0px; 
    z-index: 5; 
    background-color: #fff; 
    } 
    #autocomplete { 
    width: 100%; 
    } 
    #country { 
    width: 100%; 
    } 
    .placeIcon { 
    width: 20px; 
    height: 34px; 
    margin: 4px; 
    } 
    .hotelIcon { 
    width: 24px; 
    height: 24px; 
    } 
    #resultsTable { 
    border-collapse: collapse; 
    width: 240px; 
    } 
    #rating { 
    font-size: 13px; 
    font-family: Arial Unicode MS; 
    } 
    .iw_table_row { 
    height: 18px; 
    } 
    .iw_attribute_name { 
    font-weight: bold; 
    text-align: right; 
    } 
    .iw_table_icon { 
    text-align: right; 
    } 

In meiner functions.php-Datei musste ich die Skripte neu anordnen. Die Hauptdatei, die aufgerufen wird, ist die maps.googleapis.com/map. Sie hat eine Abhängigkeit von der Datei hotelloc.js.

Ich versuche jetzt herauszufinden, wie Sie die Karte für verschiedene Bildschirmgrößen ansprechend machen.

Wenn ich es in ein paar Tagen nicht herausfinden kann, werde ich eine neue Frage öffnen.