Google Map – Plot a Current Location Pin on Google Map with Search Address functionality

0
Shares
Google Map – Plot a Current Location Pin on Google Map with Search Address functionality
2.4 (48%) 5 votes

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 integrate Google map location 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 :-

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

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.

 
0
Shares
 

Have an App Idea?

Get your free consultation now