CODEWITHSUNDEEP
javascriptphpjqueryyii2yii2-advanced-app
Mike Ross
Mike Ross

Reputation: 2972

Use inline script in views yii2

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

Upvotes: 1

Views: 1421

Answers (1)

user5461125
user5461125

Reputation:

Your code looks fine to me. If you want to check weather the script is working or not than try firebug or in google chrome,go to inspect element on that page,go to source section and locate the script there.

Use breakpoints and refresh the page or generate the event which should use the script and you will know that your script is included or not.

There might be one more issue that your css code might be conflicting with same name. Try changing the name or id of the map and see.

Google examples of integrating maps and you will find tons of example on how to implement the map on your page.

Upvotes: 1

Related Questions