How To Embed Google Maps with Latitude and Longitude

Last Updated On : Friday, April 8, 2016
3

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.

  • joe

    Hi

    Thanks for this. How can we open a map by the click of a link. So for instance I have a map associated with every post and on the category page – alongwith the Title I want to give a link (anchor text – See Map) which when clicked shall open the map in a pop-up.

    Regards
    Joe

    • T2Lead

      Hi Joe,
      To do so, open a html page and paste the map embed code and save it.Then upload it to your web server. Then place a link for the embed page.

      or try any pop up window html codes and link it accordingly.. Come back if you have any further clarifications.

      Thanks
      Ashok
      http://www.t2lead.in

  • iouri kadeev

    Thank you, Ashok Udhayan!