Home Google How To Embed Google Maps with Latitude and Longitude

How To Embed Google Maps with Latitude and Longitude

In the previous post, we have seen how to find the latitude and longitude of any location in Google Maps. As a follow-up post, I’m now going show you a simple step to embed basic Google maps of any location by only changing the Latitude & Longitude. To do so you need Latitude & Longitude of the location you want to embed.

Google provide a simple HTML code to embed Google Maps in your website. Refer post.

Code Snippet:

<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src=”https://maps.googleapis.com/maps/api/js?sensor=false”></script>
<script>
function initialize() {
var map_canvas = document.getElementById(‘map_canvas’);
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=”map_canvas”></div>
</body>
</html>

Here change the values of Latitude and Longitude of your location.

center: new google.maps.LatLng(44.5403, -78.5463),

You can also change the zoom level by modifying the values of

zoom:8,

Increase the value ‘8’ to Zoom in and decrease to Zoom Out.

Specify the width & height of the map you are going embed.

width: 500px;
height: 400px;

Highlighted fields need to be changed. Hope this tutorial will be helpful to you.

Ashok Udhayanhttps://www.techtolead.com
Ashok Udhayan is the Founder and Chief Editor at TechToLead. He is a Software Engineer by education and a Blogger by Passion. He loves latest technologies, Gadgets, Android and anything related to tech.

Latest Posts