I have used this script
<script type="text/javascript">
var geocoder;
var map;
function initialiserCarte() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(36.800519, 10.179326);
var mapOptions = {
zoom : 14,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'tn'}
};
var input = document.getElementById('address');
autocomplete = new google.maps.places.Autocomplete(input, options);
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function TrouverAdresse() {
var adresse = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var strposition = results[0].geometry.location+"";
strposition=strposition.replace('(', '');
strposition=strposition.replace(')', '');
document.getElementById('text_latlng').innerHTML= strposition;
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Adresse introuvable: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialiserCarte);
this code works in a simple html page but no in a laravel page, I puts this script in the layout and this is my vue :
<div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}" style="color:red;" >
<label for="address" class="field prepend-icon" >
<input type="texte" id="address" name="address" value="{{ old('address') }}" style="width: 75%; float: left;" class="gui-input" placeholder="Donner l'adresse de votre établissement...">
<label for="address" class="field-icon">
<i class="fa fa-home"></i>
</label>
</label><br clear="all">
</div>
<input type="button" value="Localiser sur Google Map" onclick="TrouverAdresse();"/>
<!-- <span id="text_latlng"></span>-->
<span id="text_latlng"></span>
but the function TrouverAdresse(); doesn't work, can you help me please ? and thanks