Yii2 extension for finding Latitude and Longitude (coordinates) using Google Maps
Requirements ¶
Yii 2.x
Installation ¶
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist ibrarturi/yii2-latlng-finder "dev-master"
or add
"ibrarturi/yii2-latlng-finder": "dev-master"
to the require section of your composer.json
file.
Usage ¶
Once the extension is installed, simply use it in your code mentioned below. Click once on the map to the get the marker and coordinates then you can drag the marker around to the desired place on the map.
- Default usage
<div class="form-group">
<label class="control-label" for="lat">Latitude</label>
<input class="form-control" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label class="control-label" for="lng">Longitude</label>
<input class="form-control" type="text" name="lng" id="lng">
</div>
<div class="form-group">
<label class="control-label" for="zoom">Zoom</label>
<input class="form-control" type="text" name="zoom" id="zoom">
</div>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget(); ?>
- Default usage without Zoom Field
<div class="form-group">
<label class="control-label" for="lat">Latitude</label>
<input class="form-control" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label class="control-label" for="lng">Longitude</label>
<input class="form-control" type="text" name="lng" id="lng">
</div>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget([
'enableZoom' => false // true, false
]); ?>
- Default usage with optional parameters
<div class="form-group">
<label class="control-label" for="lat">Latitude</label>
<input class="form-control" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label class="control-label" for="lng">Longitude</label>
<input class="form-control" type="text" name="lng" id="lng">
</div>
<div class="form-group">
<label class="control-label" for="zoom">Zoom</label>
<input class="form-control" type="text" name="zoom" id="zoom">
</div>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget([
'latAttribute' => 'lat', // Latitude text field id
'lngAttribute' => 'lng', // Longitude text field id
'zoomAttribute' => 'zoom', // Zoom text field id
'mapCanvasId' => 'map', // Map Canvas id
'mapWidth' => 450, // Map Canvas width
'mapHeight' => 300, // Map Canvas mapHeight
'defaultLat' => -34.397, // Default latitude for the map
'defaultLng' =>150.644, // Default Longitude for the map
'defaultZoom' => 8, // Default zoom for the map
'enableZoomField' => true, // True: for assigning zoom values to the zoom field, False: Do not assign zoom value to the zoom field
]); ?>
- Default usage with model
<?= $form->field($model, 'lat') ?>
<?= $form->field($model, 'lng') ?>
<?= $form->field($model, 'zoom') ?>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget([
'model' => $model, // model object
]); ?>
- Default usage with model without zoom field
<?= $form->field($model, 'lat') ?>
<?= $form->field($model, 'lng') ?>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget([
'model' => $model, // model object
'enableZoom' => false // true, false
]); ?>
- Default usage with model and optional parameters
<?= $form->field($model, 'lat') ?>
<?= $form->field($model, 'lng') ?>
<?= $form->field($model, 'zoom') ?>
<?= \ibrarturi\latlngfinder\LatLngFinder::widget([
'model' => $model, // model object
'latAttribute' => 'lat', // Latitude attribute
'lngAttribute' => 'lng', // Longitude attribute
'zoomAttribute' => 'zoom', // Zoom text attribute
'mapCanvasId' => 'map', // Map Canvas id
'mapWidth' => 450, // Map Canvas width
'mapHeight' => 300, // Map Canvas mapHeight
'defaultLat' => -34.397, // Default latitude for the map
'defaultLng' =>150.644, // Default Longitude for the map
'defaultZoom' => 8, // Default zoom for the map
'enableZoomField' => true, // True: for assigning zoom values to the zoom field, False: Do not assign zoom value to the zoom field
]); ?>
Good job, put...
I have a problem, in the page display the next error:
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
where I put my api key?
PS. Sorry my bad English =(
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.