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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Dealing With Redux User Authentication & Flatirons Final Hurdle

Devslopes: Main Function of Javascript

Meet zx: A Better Way to Write Scripts with Node.js

JavaScript Omni-Packages

JavaScript Omni-packages

WebSockets with Spring WebFlux

leetcode 94. Binary Tree Inorder Traversal

Account Linking with passportjs in 3 minutes

My first react website!

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
Sis Ccr

Sis Ccr

Depths of ocean could not swallow me.

More from Medium

What doesn’t exist won’t leak, will it

Praedor: Sangue Verde

Some Thoughts on Deterministic Netcode in GameMaker

Teknik Konfigurasi DHCP Server dan DHCP Relay pada Cisco Packet Tracer