GoogleMaps with Phoenix 1.5

While in mobile application we needed to install sdk for google maps, I found it somewhat similar in the web too. Easy part is that we can add it via cdn. And hard part is that we have to use Javascript. :) But It was not that hard though.

<div class="w-1/4 h-70">
    <div id="googleMap" style="width:100%;height:400px;"></div></div>

I created div with id equal to googleMap

Then in script below just added this.

<script>
    function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

We need key for googlmaps to work otherwise we can pass empty to start in development mode

<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>

And there was map rendered in the view. Cool :).

Now to find the current location I used a snippet from w3school and modify it as my needs. I added a button and added onClick event on it. When I got the lattitude and longitude, I use jQuery to populate these value in my input field.

here is my full code. And It worked for me