Plot Current Location Pin on Google Map With SearchBar Functionality

Do you want to integrate Google map in your web application? It’s easy to just integrate Google Map by searching on Google.

Additionally, if you want to integrate Google Map with SearchBar, it’s also easy by searching on Google.

But, how to Plot location on Google Map with search address, plot a pin, get address details or current address details with current pin plotted? It is quite difficult to get everything from exploring Google.

Don’t worry.

We have found easy to implement code that combines all above functionalities together. Our shared simple, integrated solution saves your huge time, you just have to add below code to get all functionalities.

Google Map - Plot a Current Location Pin on Google Map

Here is the Complete Code:

Places Searchbox

 

Note :- Whenever you run the upper code, the browser asks for permission to share your location and user has to give permission for the current location.

2

Getting Started:-

Create an HTML page.
Integrate Map JavaScript API in our HTML page.

-Note :-

hand icon Create map div and search dialogue box


hand icon Adding a map

hand icon To get current Latitude/Longitude and pass data to the map, initAutocomplete() method is used

function initAutocomplete() {
    navigator.geolocation.getCurrentPosition(success, error);
    
    function success(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        initialize();
    }
    
    function error(err) {
        console.log(err);
    }
    }
Copy to Clipboard

hand icon To bound data into map for each place detail with name and location details

var bounds = new google.maps.LatLngBounds();

places.forEach(function (place) {
  var icon = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
};

  placeMarker(place.geometry.location, place.formatted_address);
  if (place.geometry.viewport) {
    // Only geocodes have viewport.
    bounds.union(place.geometry.viewport);
    } else {
    bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
Copy to Clipboard

Want to Create a Web Application?

Want to validate your app idea or consult with an expert? Get a free consultation now!

Cta Image

hand icon To plot a particular location pin PlaceMarker() method is used

function placeMarker(location, address) {
    // Clear out the old markers.
    if (marker) {
      marker.setPosition(location);
    } else {
    marker = new google.maps.Marker({
        draggable: false,
        position: location,
        map: map,
        optimized: false
        });
    }
}
Copy to Clipboard

hand icon To address details of each plotted location pin getAddress() method is used

function getAddress(latLng, address) {
    geocoder.geocode({'latLng': latLng},
    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        var mapAddr;
          if (results[0]) {
            if (address) {
            mapAddr = address;
            } else {
              mapAddr = results[0].formatted_address;
            }
        }
        }
    });
    }
Copy to Clipboard

It’s simple.

Hope, you have got an idea about how to integrate Google map with search address, plot a pin, address details or current address details with current plotted pin. If you have any queries about this, hire PHP programmer on an hourly basis.

Bhaval Patel

Written by

Bhaval Patel is a Director (Operations) at Space-O Technologies. He has 20+ years of experience helping startups and enterprises with custom software solutions to drive maximum results. Under his leadership, Space-O has won the 8th GESIA annual award for being the best mobile app development company. So far, he has validated more than 300 app ideas and successfully delivered 100 custom solutions using the technologies, such as Swift, Kotlin, React Native, Flutter, PHP, RoR, IoT, AI, NFC, AR/VR, Blockchain, NFT, and more.