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

Data Structures — Part 2 — Stacks + How to Implement

stack

How To Use the TripAdvisor API to Build a Simple Travel App

TOP 10 ADVANTAGES OF USING REACT.JS

OnCollisionEnter Vs. OnTriggerEnter — When to use them?

Social Login with Phoenix 1.5

15 Proven Optimization Tips For Angularjs Development To Speed Up Your Web App Performance

Template Haskell and Cross Compilation

I’m Going to Build My Own SaaS in 30 Days

Man in a suit lokking like he’s about to conquer the world

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

Podman — The new age Containerization Tool

Seamlessly switch to Rancher Desktop as a replacement for Docker Desktop on Mac (for…

What Is Googie Architecture? SoCal’s Forgotten Vision of the Future.

Geolocation on Cloudflare Workers