Skip to content

Commit

Permalink
Added MarkerManager javascript class for managing markers on map
Browse files Browse the repository at this point in the history
  • Loading branch information
Bhagwat Kumar committed Jan 9, 2011
1 parent 71cd583 commit e8ab699
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 86 deletions.
Expand Up @@ -8,11 +8,11 @@ import com.intelligrape.map.misc.MapMarker
*/

class MapTagLib {
static namespace = "ig"
static namespace = "googleMap"

def config = grailsApplication.config

def mapInit = {attrs ->
def init = {attrs ->
String version = attrs.remove('version') ?: config.map.api.version
String sensor = attrs.remove('sensor') ?: config.map.api.sensor
String language = attrs.remove('language') ?: config.map.api.language ?: null
Expand Down Expand Up @@ -169,13 +169,14 @@ class MapTagLib {
checkRequiredAttributes("updateMarkersOnMap", attrs, ["map", "markers"])
String map = attrs.remove("map")
def markers = attrs.remove("markers")
Boolean clearOld=attrs.remove("clearOld")?:true

String onClickHandler = "ig_updateMarkersOnMap(${map}, ${markers});"
String onClickHandler = "ig_updateMarkersOnMap(${map}, ${markers}, ${clearOld});"
out<<onClickHandler
}

def updateMarkersOnMapLink={attrs, body->
out << "<a href=\"#\" onClick=\"${ig.updateMarkersOnMapFunction(attrs)}\" >${body()}</a>"
out << "<a href=\"#\" onClick=\"${googleMap.updateMarkersOnMapFunction(attrs)}\" >${body()}</a>"
}

private void checkRequiredAttributes(String tagName, def attrs, List requiredAttributesList) {
Expand Down
24 changes: 12 additions & 12 deletions grails-app/views/index.gsp
Expand Up @@ -18,14 +18,14 @@
];
</script>
<ig:mapInit version="3.2" sensor="false" addressAutoComplete="true"/>
<googleMap:init version="3.2" sensor="false" addressAutoComplete="true"/>
<title>Google Map Demo</title>
</head>
<body>
<table width="100%">
<tr>
<td colspan="2">
Search : <ig:searchAddressInput name="searchAddress" map="googleMap" width="500"
Search : <googleMap:searchAddressInput name="searchAddress" map="googleMap" width="500"
minChars="3" scrollHeight="400"
style="width:90%;" language="en"
onComplete="testFunction"/> <br/>
Expand All @@ -34,7 +34,7 @@
<tr>
<td style="vertical-align:top; text-align:left;">
<g:set var="homeMarker" value="${new MapMarker(latitude: 40.72968163306612, longitude:-73.991138935)}"/>
<ig:map
<googleMap:map
name="googleMap"
mapDivId="map_canvas"
zoom="18"
Expand All @@ -48,23 +48,23 @@
<div id="map_canvas" style="height:312px;width:576px"></div>

<div>
<ig:directionLink map="googleMap" destination="Sector 59 Noida" panel="directionText">Show Route from Home marker to Sector 59 Noida</ig:directionLink><br/>
<googleMap:directionLink map="googleMap" destination="Sector 59 Noida" panel="directionText">Show Route from Home marker to Sector 59 Noida</googleMap:directionLink><br/>

<ig:directionLink map="googleMap" origin="Connaught Place, New Delhi, Delhi, India" destination="Sector 59 Noida" panel="directionText">Show Route from : Connaught Place, New Delhi, Delhi, India to: Sector 59 Noida</ig:directionLink><br/>
<googleMap:directionLink map="googleMap" origin="Connaught Place, New Delhi, Delhi, India" destination="Sector 59 Noida" panel="directionText">Show Route from : Connaught Place, New Delhi, Delhi, India to: Sector 59 Noida</googleMap:directionLink><br/>

<ig:hideDirection map="googleMap">Hide direction from map only</ig:hideDirection><br/>
<ig:hideDirection map="googleMap" panel="directionText">Hide direction from map and empty textual direction</ig:hideDirection><br/>
<ig:streetViewLink map="googleMap" address="42.345573,-71.098326">Show Streetview for 42.345573,-71.098326</ig:streetViewLink><br/>
<googleMap:hideDirection map="googleMap">Hide direction from map only</googleMap:hideDirection><br/>
<googleMap:hideDirection map="googleMap" panel="directionText">Hide direction from map and empty textual direction</googleMap:hideDirection><br/>
<googleMap:streetViewLink map="googleMap" address="42.345573,-71.098326">Show Streetview for 42.345573,-71.098326</googleMap:streetViewLink><br/>

<ig:streetViewLink map="googleMap" address="761 Harrison Avenue, Boston, Massachusetts, United States">Show Streetview for 761 Harrison Avenue, Boston, Massachusetts, United States</ig:streetViewLink><br/>
<googleMap:streetViewLink map="googleMap" address="761 Harrison Avenue, Boston, Massachusetts, United States">Show Streetview for 761 Harrison Avenue, Boston, Massachusetts, United States</googleMap:streetViewLink><br/>

<ig:hideStreetView map="googleMap">Hide Street view</ig:hideStreetView><br/>
<googleMap:hideStreetView map="googleMap">Hide Street view</googleMap:hideStreetView><br/>

<ig:updateMarkersOnMapLink map="googleMap" markers="markersList" >Load markers</ig:updateMarkersOnMapLink>
<googleMap:updateMarkersOnMapLink map="googleMap" markers="markersList" clearOld="true" >Load markers</googleMap:updateMarkersOnMapLink>
</div>
</td>
<td style="vertical-align:top; text-align:left;">
<ig:directionSearchPanel map="googleMap" panel="directionText"/>
<googleMap:directionSearchPanel map="googleMap" panel="directionText"/>
<div id="directionText"></div>
</td>
</tr>
Expand Down
4 changes: 2 additions & 2 deletions grails-app/views/map/_searchPanel.gsp
Expand Up @@ -17,15 +17,15 @@
<g:message code="directionSearch.origin.text" default="Origin"/> :
</td>
<td>
<ig:searchAddressInput name="origin" size="42" class="inputType"/>
<googleMap:searchAddressInput name="origin" size="42" class="inputType"/>
</td>
</tr>
<tr>
<td>
<g:message code="directionSearch.destination.text" default="Destination"/> :
</td>
<td>
<ig:searchAddressInput name="destination" size="42" class="inputType"/>
<googleMap:searchAddressInput name="destination" size="42" class="inputType"/>
</td>
</tr>
<tr>
Expand Down
114 changes: 57 additions & 57 deletions web-app/js/jquery-autocomplete/geo_autocomplete.js
@@ -1,57 +1,57 @@
/*
* jQuery geo_autocomplete plugin 1.0
*
* Copyright (c) 2009 Bob Hitching
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Requires jQuery Autocomplete plugin by J�rn Zaefferer - see http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
* jquery.autocomplete.js requires a minor modification for geo_autocomplete to work, as shown in /lib/jquery.autocomplete_geomod.js
*
*/
;(function($) {

$.fn.extend({
geo_autocomplete: function(_geocoder, _options) {
options = $.extend({}, $.Autocompleter.defaults, {
geocoder: _geocoder,
parse: function(_results, _status, _query) {
var _parsed = [];
if (_results && _status && _status == 'OK') {
$.each(_results, function(_key, _result) {
if (_result.geometry && _result.geometry.viewport) {
// place is first matching segment, or first segment
var _place_parts = _result.formatted_address.split(',');
var _place = _result.formatted_address;
_parsed.push({
data: _result,
value: _place,
result: _place
});
}
});
}
return _parsed;
},
formatItem: function(_data, _i, _n, _value) {
var _src = 'http://maps.google.com/maps/api/staticmap?visible=' + _data.geometry.viewport.getSouthWest().toUrlValue() + '|' + _data.geometry.viewport.getNorthEast().toUrlValue() + '&size=' + options.mapwidth + 'x' + options.mapheight + '&maptype=' + options.maptype + '&key=' + options.mapkey + '&sensor=' + (options.mapsensor ? 'true' : 'false');
var _place = _data.formatted_address;
return _place + '<br clear="both"/>';
}
}, _options);

// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };

// if the formatMatch option is not specified, then use formatItem for backwards compatibility
options.formatMatch = options.formatMatch || options.formatItem;

return this.each(function() {
new $.Autocompleter(this, options);
});
}
});

})(jQuery);
/*
* jQuery geo_autocomplete plugin 1.0
*
* Copyright (c) 2009 Bob Hitching
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Requires jQuery Autocomplete plugin by J�rn Zaefferer - see http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
* jquery.autocomplete.js requires a minor modification for geo_autocomplete to work, as shown in /lib/jquery.autocomplete_geomod.js
*
*/
(function($) {

$.fn.extend({
geo_autocomplete: function(_geocoder, _options) {
options = $.extend({}, $.Autocompleter.defaults, {
geocoder: _geocoder,
parse: function(_results, _status, _query) {
var _parsed = [];
if (_results && _status && _status == 'OK') {
$.each(_results, function(_key, _result) {
if (_result.geometry && _result.geometry.viewport) {
// place is first matching segment, or first segment
var _place_parts = _result.formatted_address.split(',');
var _place = _result.formatted_address;
_parsed.push({
data: _result,
value: _place,
result: _place
});
}
});
}
return _parsed;
},
formatItem: function(_data, _i, _n, _value) {
var _src = 'http://maps.google.com/maps/api/staticmap?visible=' + _data.geometry.viewport.getSouthWest().toUrlValue() + '|' + _data.geometry.viewport.getNorthEast().toUrlValue() + '&size=' + options.mapwidth + 'x' + options.mapheight + '&maptype=' + options.maptype + '&key=' + options.mapkey + '&sensor=' + (options.mapsensor ? 'true' : 'false');
var _place = _data.formatted_address;
return _place + '<br clear="both"/>';
}
}, _options);

// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };

// if the formatMatch option is not specified, then use formatItem for backwards compatibility
options.formatMatch = options.formatMatch || options.formatItem;

return this.each(function() {
new $.Autocompleter(this, options);
});
}
});

})(jQuery);
101 changes: 90 additions & 11 deletions web-app/js/map.init.js
@@ -1,3 +1,7 @@
/**
* @name Google Map Plugin Utility
* @author Bhagwat Kumar
*/
var ig_mapConfiguration = {};
var geoCoder;
var directionService;
Expand All @@ -9,7 +13,10 @@ function ig_mapInit(ig_mapDiv, configurationForMap, showHomeMarker, latitudeId,
var igGoogleMap = new google.maps.Map(document.getElementById(ig_mapDiv), configurationForMap);
var homeMarker;
ig_mapConfiguration[igGoogleMap] = new Object();
ig_mapConfiguration[igGoogleMap].markerManager = null;

homeMarker = ig_createMarker(igGoogleMap, configurationForMap['center']);

if (!showHomeMarker) {
homeMarker.setVisible(false);
}
Expand Down Expand Up @@ -194,10 +201,25 @@ function ig_hideStreetView(map, streetViewDiv) {
jQuery('#' + streetViewDiv).empty();
}

function getMarkerManager(map) {
var markerManager = ig_mapConfiguration[map].markerManager;
if (!markerManager) {
markerManager = new MarkerManager(map);
ig_mapConfiguration[map].markerManager = markerManager;
}
return markerManager;
}

function ig_updateMarkersOnMap(map, markers, clearOld) {
markerManager = getMarkerManager(map);
if (clearOld) {
markerManager.clearMarkers();
}

var markersArrayToBeAddedToClusterer = [];
jQuery(markers).each(function(key, markerInfo) {
var configuration = {};
configuration.map = map;
// configuration.map = map;
configuration.position = new google.maps.LatLng(markerInfo["latitude"], markerInfo["longitude"]);
var propertiesList = ["zIndex", "draggable", "visible", "title", "icon", "shadow", "clickable", "flat", "cursor","raiseOnDrag", "content"]
jQuery.each(propertiesList, function(index, property) {
Expand All @@ -218,17 +240,74 @@ function ig_updateMarkersOnMap(map, markers, clearOld) {
infoWindow.open(map, marker);
}
});
})
markersArrayToBeAddedToClusterer.push(marker);
});

markerManager.addMarkers(markersArrayToBeAddedToClusterer);
}

/*
function updatePovData(pov) {
jQuery('#pov-heading').val(pov.heading);
jQuery('#pov-pitch').val(pov.pitch);
jQuery('#pov-zoom').val(pov.zoom);
}
function updatePovData(pov) {
jQuery('#pov-heading').val(pov.heading);
jQuery('#pov-pitch').val(pov.pitch);
jQuery('#pov-zoom').val(pov.zoom);
}
function updatePanoId(panoId) {
jQuery('#pov-panoId').val(panoId);
}
*/
function updatePanoId(panoId) {
jQuery('#pov-panoId').val(panoId);
}
*/

function MarkerManager(m) {
var markers_array;
var map = m;
return {
getMap : function() {
return map;
},
addMarkers : function(temp_markers_array) {
if (!markers_array) {
markers_array = new Array();
}
for (counter = 0; counter<temp_markers_array.length; counter++) {
var marker = temp_markers_array[counter];
marker.setMap(map);
markers_array.push(marker);
}
return markers_array;
},
clearMarkers : function() {
if (markers_array) {
for (counter = 0; counter<markers_array.length; counter++) {
var marker = markers_array[counter];
marker.setMap(null)
}
}
markers_array = null;
},
findMarker : function(lat, lng) {
var marker = null;
if (markers_array) {
for (counter = 0; counter<markers_array.length; counter++) {
var temp_marker = markers_array[counter];
if (temp_marker.lat() == lat && temp_marker.lng() == lng) {
marker = temp_marker;
break;
}
}
}
return marker;
},
setVisible:function(isVisible){
for (counter = 0; counter<markers_array.length; counter++) {
markers_array[counter].setVisible(isVisible)
}
} ,
getMarkers : function() {
return markers_array;
},
getMarkersCount : function() {
return markers_array.length || 0;
}
};
}

0 comments on commit e8ab699

Please sign in to comment.