I was working with Google maps API :) and i was interested in finding the plugins to load Google map instantly into web pages using Javascript to enhance better views and control the maps using controllers.The world is now relies on Maps which makes our life automated by finding places using maps using google and bing.I found excellent plugin to load maps instantly using maplace.js and using JQuery and google maps API.
rite here is the code to ad the plugin!
This function enables to call the function to load the map in to div tag.with various options we could control the content to be loaded in the div tag for the websites.There are numerous options to handle the data ,here i'm describing only the basic content.For more options visit the official site here - maplace official site
by default the div tag for loading content is #gmap and for control is #control over the map
so let us see the HTML code to display the map.
we could change it by using the options given below.
i have a given simple example to show the particular latitude and longitude to show on google map.Just follow the codes.
i have given only just a demo about using maplace.js,it consist of numerous options to play with it visit the official site to integrate with the maplace.js.it consist of numerous of events options and integrations.share is care.report bug as comments.
Download - maplace.js
 |
| This map is derived from maplace.js |
How to install the plugin:
the set up was quite easy as like other plugins we could just ad the maplace.js and we could call the functions with the specified arguments like location etc.rite here is the code to ad the plugin!
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="maplace.js"></script>Functions with options:
new Maplace({ your desired options }).Load();options:
latitude of earth : lat eg : lat: 45.9
longitude of earth : lon eg : lon:10.9
title for link : title: 'Title A1'
html : your html coding here.
icon : icon url for marker
zoom : zoom level for focusing marker
show_infowindow : boolean value
longitude of earth : lon eg : lon:10.9
title for link : title: 'Title A1'
html : your html coding here.
icon : icon url for marker
zoom : zoom level for focusing marker
show_infowindow : boolean value
by default the div tag for loading content is #gmap and for control is #control over the map
so let us see the HTML code to display the map.
<div id="gmap"></div>This id's in div are default and could display the map inside the div and show the controls.
<div id="controls"></div>
we could change it by using the options given below.
 |
| further options in detail |
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="/home/shivasurya/maplace.js"></script>
<script type="text/javascript">
$(function() {
new Maplace({
locations:
[{
lat: 49.9,
lon: 10.9,
zoom: 8
}],
map_div: '#gmap-dropdown',
controls_title: 'locate:'
}).Load();
new Maplace({
locations: [{
lat: 25.9,
lon: 15.9,
zoom: 8
}],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'locate:'
}).Load();
});
</script>
</head>
<body>
<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>
</body>
</html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="/home/shivasurya/maplace.js"></script>
<script type="text/javascript">
$(function() {
new Maplace({
locations:
[{
lat: 49.9,
lon: 10.9,
zoom: 8
}],
map_div: '#gmap-dropdown',
controls_title: 'locate:'
}).Load();
new Maplace({
locations: [{
lat: 25.9,
lon: 15.9,
zoom: 8
}],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'locate:'
}).Load();
});
</script>
</head>
<body>
<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>
</body>
</html>
i have given only just a demo about using maplace.js,it consist of numerous options to play with it visit the official site to integrate with the maplace.js.it consist of numerous of events options and integrations.share is care.report bug as comments.
0 comments:
Post a Comment