[solved] Google maps - update div/map on form input field update

Need Help
1

Hi, I am quite new to php development and cakephp and I need some help :slight_smile:

I successfully installed google map helper (https://github.com/marcferna/CakePHP-GoogleMapHelper/tree/CakePHP3) , and I can show a map with a draggable marker.

I need the users to setup a position on the map when they fill out a form, and I’d like to show the map centered on the location provided in the address input field (using google maps geocoding) without reloading the page.

As it is working now my map is independent from the address field, and it’s centered on a default lat & lng position. The user has to drag the marker around the whole world and pressing CTRL and mouse wheel to zoom in and out and it makes the entire process a pain…

I think that my best option would be that the map is invisible (or not there) until the user fills out the address input field in the form.
Every time address input field lose focus (or after some time - if an address value has been inserted) the map should show up, centered on the address provided as found by google geolocation, asking the user to drag the marker on the “real world” exact position - so that I can save it in lat&lng coordinates.
Since the map should be already centered on the address location ( unless there was a big mistake from the user or from google geolocation service :roll_eyes:) the user should just drag the marker a bit to confirm the position.

How can I do this? I currently have this code in my edit template: it should be replicated with some slight edits in add template.

Thank you

----------------------------------------------Template/places/edit.php

<?= $this->Html->script("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); ?> 
<?= $this->Html->script("http://maps.google.com/maps/api/js?sensor=false"); ?> 



<div class="places form large-9 medium-8 columns content">
    <?= $this->Form->create($place) ?>
  
    <fieldset>
        <legend><?= __('Edit Place') ?></legend>
        <?php
            echo $this->Form->control('name');
            echo $this->Form->control('address');
            echo $this->Form->control('phone');
				
					  $map_options = array(
						"localize" => false,
						"type" => "ROADMAP",
						"zoom" => 14,
						"marker" => false,
						"draggableMarker" => false,
						'latitude' => $this->Number->precision($place->lat,11),
						'longitude' =>$this->Number->precision($place->lng,11),
					  );

					echo $this->GoogleMap->map( $map_options); 
					echo $this->GoogleMap->addMarker('map_canvas', 1, array('latitude' => $this->Number->precision($place->lat,11), 'longitude' => $this->Number->precision($place->lng, 11),  'address' => $place->address), array('draggableMarker' => true, 'windowText' => $place->name)); 
				
            echo $this->Form->hidden('lat', ['id' => 'latitude_1', 'type' => 'text' ]);
            echo $this->Form->hidden('lng', ['id' => 'longitude_1', 'type' => 'text']);
            echo $this->Form->control('user_id', ['options' => $users, 'empty' => true]);
            echo $this->Form->control('experiences._ids', ['options' => $experiences]);
        ?>
    </fieldset>
    <?= $this->Form->button(__('Submit')) ?>
    <?= $this->Form->end() ?>
</div>

----------------------------------------------Template/places/edit.php

2

solved using this fine piece of software :slight_smile:

https://ubilabs.github.io/geocomplete/