I found a jquery code online to integrate google map and i want to integrate in my application to get the address correctly. This is the jquery i found. I am using yii2 Advanced template. I created a new AssetBundle named LocateAsset.php code is as follows
class LocateAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
'src/jquery.ui.addresspicker.js',
'src/addresspickermap.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
There was inline scripting on original demo plugin page but i created separate .js file named addresspickermap.js. I did register the form using
use backend\assets\LocateAsset;
LocateAsset::register($this);
And in the same _form.php i used the code to integrate map
<div class="event-form">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'location')->textInput(['maxlength' => true]) ?>
<div class='clearfix'>
<div class='input input-positioned'>
<label>Address : </label> <input id="addresspicker_map" /> <br/>
<label>Locality: </label> <input id="locality" disabled=disabled> <br/>
<label>SubLocality: </label> <input id="sublocality" disabled=disabled> <br/>
<label>Borough: </label> <input id="administrative_area_level_3" disabled=disabled> <br/>
<label>District: </label> <input id="administrative_area_level_2" disabled=disabled> <br/>
<label>State/Province: </label> <input id="administrative_area_level_1" disabled=disabled> <br/>
<label>Country: </label> <input id="country" disabled=disabled> <br/>
<label>Postal Code: </label> <input id="postal_code" disabled=disabled> <br/>
<label>Lat: </label> <input id="lat" disabled=disabled> <br/>
<label>Lng: </label> <input id="lng" disabled=disabled> <br/>
<label>Zoom: </label> <input id="zoom" disabled=disabled> <br/>
<label>Type: </label> <input id="type" disabled=disabled /> <br/>
</div>
<div class='map-wrapper'>
<label id="geo_label" for="reverseGeocode">Reverse Geocode after Marker Drag?</label>
<select id="reverseGeocode">
<option value="false" selected>No</option>
<option value="true">Yes</option>
</select><br/>
<div id="map"></div>
<div id="legend">You can drag and drop the marker to the correct location</div>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
But i dont know what i am missing on my form page that i am not getting the map on the form page Neither the address field works Let me know what am i doing wrong. Thank you
$this->registerJsFile('pathoffile');and for register JS Script use$this->registerJs('js script');<script src="http://maps.googleapis.com/maps/api/js"></script>this script its working but that plugin uses some different map AJAX map. May be that is the reason its not loading on the pagefrontend/web/src, is that where they are? Also: Check your browser console for files that can't be loaded and add those to your question please.