DEV Community

Cover image for Show Custom Lat/Long Location using Google Map API
Thu Htet Tun
Thu Htet Tun

Posted on

3 1

Show Custom Lat/Long Location using Google Map API

Today, I am assigned a task from my today work (Jira).
That was I have to query available shop location and nearby rider location from database and show them on a map with its own information.

For this, I used google map api. The host application is used Laravel and yes, JavaScript is a must to involve in this case.

I won't tell you all my process coz it'll be boring and long.
So, I'm going to tell you only basic steps you can follow.

First step,

  1. Go to google developer console and get an api key.
    https://developers.google.com/maps/documentation/javascript/get-api-key

  2. add div tag in your blade template.
    map data will be render into that document using that id (map).

   <div id="map"></div>
Enter fullscreen mode Exit fullscreen mode
  1. import google map script tag. You've got api key from step 1 right?. Add that api key to {your_api_key} place. 'myMap' will be the callback function name that we'll add later.
   <script src="https://maps.googleapis.com/maps/api/js?key={your_api_key}&callback=myMap"></script>
Enter fullscreen mode Exit fullscreen mode
  1. Add myMap function. In this case, we add a pair of lat/long location as center and marker on map. In order to show on map, we render on map data on our div using document.getElementById('map'). It has a lot of cool features google.maps so if you are interested to test, you can do more research on this.
  function myMap() {

            var center = {lat: 16.81265991142744, lng: 96.12810673385788};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: center
            });
            let marker =new google.maps.Marker({
                 position: {lat: 16.81265991142744, lng: 96.12810673385788},
                map: map,
              icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
             });
    }
Enter fullscreen mode Exit fullscreen mode

Yeah, you can test with multiple locations and markers and so on. That'll be pretty fun.

Thanks for your time.
See you on another blog.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay