jquery-ui-map
Hi all, Today we are going to explore a very simple jQuery plugin, jquery-ui-map.
It is Google map v3 plugin for both jQuery and jQuery mobile. You can find it here
https://code.google.com/p/jquery-ui-map/downloads/list . Now let’s see a simple example:
1. HTML:
2. Javascript:
<html><body><div id=”map_canvas” style=”width:300px;height:300px;”></div></body></html>
var myPosition = '57.7973333,12.0502107'; $(document).ready(function() { initMyMap(); }); function initMyMap() { $('#map_canvas').gmap({ 'center' : myPosition, 'zoom' : 9 }).bind('init', function(evt, map) { $('#map_canvas').gmap('addMarker', { 'position' : myPosition }).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content' : '<h3>Hi</h3><p>I am here</p>' }, this); }); }); }
Lets take a closer look at the code, this HTML line
<div id=”map_canvas” style=”width:300px;height:300px;”></div>
is to hold the map. Make sure you have set the div’s width and height.
For the javascript this line is very important, it is used to call our initializing function on the document ready.
$(document).ready(function() { initMyMap(); });
Then our function initMyMap, this line
$('#map_canvas').gmap({ 'center' : myPosition, 'zoom' : 9 })used to create map centered on the given position. After that, we added a marker:
$('#map_canvas').gmap('addMarker', { 'position' : myPosition })
Finally, we added an info window for our marker. Note you can put any HTML code in content.
('#map_canvas').gmap('openInfoWindow', { 'content' : '<h3>Hi</h3><p>I am here</p>' }, this);
Give it a try, good luck.
Comments
Post a Comment