Description:
Welcome to Jqueryjohn.com.
In this article, I will explain how to add Google Maps on
website using Jquery.
Google maps offer more power to web designers. Google
Maps can able to provide street maps and route planner for travelling. It is
easy to understand maps and directions and it can bring more customers through
your door.
Steps for adding Google Maps:
1. Add a following file from Google CDN.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
2. Download Google Maps Plugin.
You can download from https://github.com/hpneo/gmaps (or)
http://hpneo.github.io/gmaps/documentation.html
3. Once the document is ready, initialize
the Google Map widget to the div element.
4. We can get latitude and longitude by the
following steps.
Open
Google Maps website.
Use the
zoom controls on the map to find the place which you want to set by default.
Now,
right click on the place, select what’s
here? Option and you will get two values at the top of the page.
5. We can also add markers to highlight the place on
the map.
In the below program, I added Google maps on the
particular div and added marker for highlighting the particular position.
Example
program:
<html>
<head>
<title>Basic</title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script
src="gmaps.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
var
mapArea = new GMaps({
zoom: 9, //Set Zoom Level
el: '#divMap',
lat: 8.565081,
lng: 77.968092,
zoomControl: true,
zoomControlOpt: {
style: 'LARGE',
position: 'RIGHT_CENTER'
},
panControl: true, // used for
navigating left,right,top and bottom
streetViewControl: true,
mapTypeControl: true, //used for
displaying map/satellite mode
overviewMapControl: false
});
mapArea.addMarker({
lat: 8.565081,
lng: 77.968092,
title: 'Nazareth',
click: function
(e) {
alert('Nazareth');
}
})
});
</script>
<style
type="text/css">
#divMap
{
display:
block;
width:
95%;
height:
350px;
margin: 0 auto;
box-shadow:
0px 5px 20px #ccc;
}
</style>
</head>
<body>
<div>
<div id="divMap">
</div>
</div>
</body>
</html>
Adding Google Maps to your site, Adding custom Google maps
to your website using jQuery, Embed Google map in your webpage
I got it.. it works fine... thanks john..
ReplyDelete