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.

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.

Getting Started:-

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

-Note :-

<GOOGLE-API-KEY> To get API key make one app on google developer console from below URL and follow steps.
Url :- https://developers.google.com/maps/documentation/javascript/get-api-key
libraries -> to get places from a search bar
Callback -> automatic call initAutocomplete() method on page load

Create map div and search dialogue box

Adding a map

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);
    }
    }

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);

Want to Create a Web Application?

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

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
        });
    }
}

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;
            }
        }
        }
    });
    }

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.