Convenient markers for jGmap google maps

This article is a prequel of the article on the grouping of markers , because as you know, in order to group something unnecessary, you must first display something unnecessary;)



The plugin allows you to display many markers on the map with custom icons and information windows, group (optional). It is also possible to specify the target input that will be used for geocoding, drag the marker to manually adjust the results and track their change.

')

Prehistory

The task was to give the user the opportunity to mark their objects on the map, and to make this process as pleasant as possible - to use Google geocoding. You can do it from scratch, but it is preferable to find a ready-made version. Under the 3rd version of Api, similar things were searched with tangible squeaking, but after a while the plugin was found, which later became the basis of jGmap. He geocoded well, but nothing more, and you still need the possibility of manual adjustment of the results.

I am being deformed

Next, imagine a situation: the user comes to edit the object created earlier - do not geocode it again, especially if it was changed manually? Then I wrote a functional for manual adjustment of the results of geocoding and marker display. It turned out, in principle, not bad - we are looking for, correcting, displaying. To display the general list of objects, quite significant changes were made: first of all, the display of a real array of markers (and not just an single instance), a bunch of markermanager for grouping, customization of icons and information windows.

And where is the logic

All this was still called an auto-geocoder and behaved accordingly: it clung to the text input, asked the css-class for the diva with the future map, position (before / after input) and so on. It was only obvious that this is no longer a geocoding plugin. A few frauds - and the plugin took the present form.

How to use

JQuery version 1.3.2 and higher is required for the plugin to work, this is due to incorrect processing of selectors in lower versions. And although at one time there was a hack for compatibility with 1.3.0, I chose to give it up.

The best documentation is an example of use:

$( document ).ready( function (){
$( "#search-map" ).Gmap({
//,
show_points: {
lat: "lat" , //name , <input type="hidden" name="lat[0]" />
lng: "lng" , // lat
infowindow: "infowindow" , // lat

// ,
marker: {
icon: "icon" , //name <input type="hidden" name="icon[1]" value="/img/caution.png" />
shadow: "shadow" // marker.icon
},

// API v3
infowindow_options: {
disableAutoPan: true
},

autofit: true , // ,

// ,
icon:{
src: "http://maps.google.com/mapfiles/ms/micons/purple.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/pushpin_shadow.png"
},

//
group_markers: true ,

// markermanager
markermanager_options:{
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"
},
cell: {
width: 48,
height: 96
}
}
},

//
geocoder: {
// , , id , innerHtml
clarification: "" ,

//id ,
target: "search_id" ,

//
bounds: {sw: [37, 40], ne: [80, 140]},

//
country: "RU" ,

//
language: "ru" ,

//
success: {
zoom : 8
},

// , - onkeyup onchange
auto: "onkeyup" ,

// , {auto: onkeyup}
delay: 3000,

//
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/question.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/question.shadow.png"
},

//id - , , .
track_coordinates:{
lat: "lat" ,
lng: "lng" ,
accuracy: "accuracy" ,
infowindow: " ..." , //

// API v3
marker_options: {
draggable: true
}
}
},

// API v3
initial:{
draggable: true ,
zoom: 5,
center: [58, 35],
mapTypeControl : true ,
scaleControl: true ,
min_zoom: 20 //
}
});
});

* This source code was highlighted with Source Code Highlighter .

Conclusion

This is what manual geocoding results look like.


Demo
Sources

upd Thank you, transferred to Web development
upd2 Removed the wrong shadows