Google Places Autocomplete - Mehrere Instanz Stylings

Question

Ich habe zwei Stellen Autocomplete-Eingaben auf einer Seite. Wie kann ich beide Dropdown-Listen unterschiedlich gestalten? Die folgenden funktioniert gut für das Styling ein:

.pac-container{ 

    margin-top: -1px; 
    background-color: rgb(245,245,245); 
} 

.pac-item *{ 

    font-size: 14px !important; 
} 

.pac-item-query{ 

    font-weight: bold; 
} 

Answer 1

Eine Möglichkeit wäre, die ID der Elemente zu verwenden, um sie anders zu stylen

#autocomplete { 
    color: blue; 
    background-color: black; 
} 
#autocomplete2 { 
    color: red; 
    background-color: blue; 
} 

Code-Schnipsel:

// This example displays an address form, using the autocomplete feature 
 
// of the Google Places API to help users fill in the information. 
 

 
var placeSearch, autocomplete, autocomplete2; 
 
var componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name' 
 
}; 
 

 
function initAutocomplete() { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('autocomplete')), { 
 
     types: ['geocode'] 
 
    }); 
 

 
    // When the user selects an address from the dropdown, populate the address 
 
    // fields in the form. 
 
    autocomplete.addListener('place_changed', function() { 
 
    fillInAddress(autocomplete, ""); 
 
    }); 
 

 
    autocomplete2 = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('autocomplete2')), { 
 
     types: ['geocode'] 
 
    }); 
 
    autocomplete2.addListener('place_changed', function() { 
 
    fillInAddress(autocomplete2, "2"); 
 
    }); 
 

 
} 
 

 
function fillInAddress(autocomplete, unique) { 
 
    // Get the place details from the autocomplete object. 
 
    var place = autocomplete.getPlace(); 
 

 
    for (var component in componentForm) { 
 
    if (!!document.getElementById(component + unique)) { 
 
     document.getElementById(component + unique).value = ''; 
 
     document.getElementById(component + unique).disabled = false; 
 
    } 
 
    } 
 

 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType] && document.getElementById(addressType + unique)) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     document.getElementById(addressType + unique).value = val; 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initAutocomplete); 
 

 
function geolocate() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var geolocation = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude 
 
     }; 
 
     var circle = new google.maps.Circle({ 
 
     center: geolocation, 
 
     radius: position.coords.accuracy 
 
     }); 
 
     autocomplete.setBounds(circle.getBounds()); 
 
    }); 
 
    } 
 
}

.pac-container { 
 
    margin-top: -1px; 
 
    background-color: rgb(245, 245, 245); 
 
} 
 
.pac-item * { 
 
    font-size: 14px !important; 
 
} 
 
.pac-item-query { 
 
    font-weight: bold; 
 
} 
 
#autocomplete { 
 
    color: blue; 
 
    background-color: black; 
 
} 
 
#autocomplete2 { 
 
    color: red; 
 
    background-color: blue; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="locationField"> 
 
    <input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" /> 
 
</div> 
 
<div id="addressone"> 
 
    <input type="text" id="street_number" name="street_number" /> 
 
    <input type="text" id="route" name="street_name" /> 
 
    <input type="text" id="locality" name="town_city" /> 
 
    <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" /> 
 
    <input type="text" id="postal_code" name="postcode" /> 
 
    <input type="text" id="country" name="country" /> 
 
</div> 
 
<div id="locationField2"> 
 
    <input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" /> 
 
</div> 
 
<div id="addresstwo"> 
 
    <input type="text" id="street_number2" name="street_number2" /> 
 
    <input type="text" id="route2" name="street_name2" /> 
 
    <input type="text" id="locality2" name="town_city2" /> 
 
    <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" /> 
 
    <input type="text" id="postal_code2" name="postcode2" /> 
 
    <input type="text" id="country2" name="country2" /> 
 
</div>