Code
Code
Code

TekMap

Objective:

Create a plugin to simplify the integration of maps with GoogleMaps(r) with the V3 API. The plugin returns the jQuery object and apply the maps to all selected elements. Why version 3? TheV2 is outdated and google has stopped supporting it.

Download

Download from the github repo.   

The plugin:

Basic Call:

$ ("# Map"). TekMap ();

is not very useful but it creates a map centered. But we can do more interesting things such as adding bookmarks.

$(“#map”).TekMap({
       lat: 42.2,
    lng: 3.2,
    mapoptions : {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false
        },
    markers : [{    lat: 42.2, lng: 3.2,  draggable:false, infowindow:"Hello" }]
 }
)

With this example we already do something else, choose the center of the map with lat and lng parameters, specify options with mapoptions map (you can put any of the options allowed by google). And added one marker using the markers option.

 

Settings for Map:

Amount: (float) latitude of the center of the map.

lng: (float) longitude of the center of the map.

click (function) callback that is called when you click the map.

mapoptions: (object) configuration settings googlemaps [info].

markers: (array) array of markers (markers thats appears on screen)

 

Add bookmarks once created the map: 

$ ("# Map"). TekMarker ((lat: 42.2, lng: 3.2, draggable: false, infowindow "hello"));

or

$("#map").TekMarker({addres:"Girona"});   //  with geocode

 

TekMarker options

Amount: (float) latitude of the marker

lng: (float) longitude of the marker

draggable: (Boolean) indicates whether the marker can drag or not.

drag (function) callback to be run upon completion of drag.

infowindow: (string) message that is displayed when you click the bookmark.

icon: (string) url of the icon. Instead you can use an object.

shadow: (string) url of the icon. Instead you can use an object.

addres :  (string)  addres where the marker has to be situated

Icon and shadow objects:

url (string) url of the icon

size: [width, height] the image size in pixels.

Base: [x, y] where the image begins

origin: [x, y] The anchor of an image is the pixel to which the system refers in tracking the image's position.

 

Examples:

Example 1
Example 2
Example 3
Example 4
Example 5 (Icons with shadow from tekmap 0.5)

comments powered by Disqus
Comunicatek - - La Bisbal d’Empordà - dani@comunicatek.com - About code - Legal