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

Depths of ocean could not swallow me.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store