Tag: google maps

Demo

Google maps can be embedded in your website using PHP without providing API key. You just need to enter your address. Or you can enter coordinates, longiude and latitude.

Google Maps is a web mapping service developed by Google. It offers satellite imagery, aerial photography, street maps, 360° panoramic views of streets, real-time traffic conditions. Also, route planning for traveling by foot, car, bicycle and air, or public transportation.

By using the Google Maps API, it is possible to embed Google Maps into an external website, on to which site-specific data can be overlaid. Although initially only a JavaScript API, the Maps API was expanded to include an API for Adobe Flash applications. But this has been deprecated. Adobe Flash was a service for retrieving static map images, and web services for performing geocoding, generating driving directions, and obtaining elevation profiles. Over 1,000,000 web sites use the Google Maps API, making it the most heavily used web application development API. In September 2011, Google announced it would deprecate the Google Maps API for Flash.

As of 21 June 2018, Google increased the prices of the Maps API and requires a billing profile. But some people didn’t find themselve comfortable with providing their credit card information. Or they are just students who want to use Google Map services. So by following the below tutorial you will be able to show Google Map in your website without providing API key. You just need to enter either address or co-ordinates like latitude and longitude.

Google maps by address without API key

Create a simple form that will have an input field for entering address via input field. And a submit button which when clicked will submit the form.

<form method="POST">
	<p>
		<input type="text" name="address" placeholder="Enter address">
	</p>

	<input type="submit" name="submit_address">
</form>

Now we need to create a PHP block that will be executed when the form submits. In that block, we will get the address entered by user in a separate variable. Since address might have spaces so we will be converting those spaces into + sign. Lastly, we will create an iFrame tag to render the map. &output=embed is important since it tells the Google Map’s server that we are going to embed the map in an iFrame.

<?php
	if (isset($_POST["submit_address"]))
	{
		$address = $_POST["address"];
		$address = str_replace(" ", "+", $address);
		?>

		<iframe width="100%" height="500" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>

		<?php
	}
?>

Google maps by latitude and longitude without API key

Create a simple form that will have 2 input fields for entering latitude and longitude via input field. And a submit button which when clicked will submit the form.

<form method="POST">
	<p>
		<input type="text" name="latitude" placeholder="Enter latitude">
	</p>

	<p>
		<input type="text" name="longitude" placeholder="Enter longitude">
	</p>

	<input type="submit" name="submit_coordinates">
</form>

Now we need to create a PHP block that will be executed when the form submits. In that block, we will get the latitude and longitude co-ordinates entered by user in separate variables. Lastly, we will create an iFrame tag and pass those co-ordinates to render the map. Make sure to separate the values using comma (,).

<?php
	if (isset($_POST["submit_coordinates"]))
	{
		$latitude = $_POST["latitude"];
		$longitude = $_POST["longitude"];
		?>

		<iframe width="100%" height="500" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>

		<?php
	}
?>

Fetch user location in Javascript

If you want to fetch the user’s location in Javascript, you have to use Javascript Geolocation API. Just call the following function:

navigator.geolocation.getCurrentPosition(function (position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
});

It will return the latitude and longitude of the user that you can embed in iframe and it will render the map on the browser.

Note: Your browser will ask for permission to access your location. You need to allow it to return the co-ordinates.

Conclusion

Although it has some limitations, for example you cannot update the marker once the map is fully loaded. In order to change the location of marker, you can re-draw the map again. But it will give you enough functionality so that if you are receiving latitude and longitude of user’s location from some android/iOS application and you wanted to show that location on admin panel. You can easily do that by following this tutorial. That’s all for now, if you face any problem or need any help feel free to ask in the comments section below.