| Behavior: Colorful Bouncy Hide/Show | |
|
Store Open? No animation Sometime today Right now Later today |
|
<script type="text/javascript">
$(document).ready(function() {
var Application = function Application(){
// variable to hold a map
this.map = undefined;
// variable to hold current active InfoWindow
this.activeInfoWindow = undefined;
// arrays to hold copies of the cities markers
this.gmarkers_cities = [];
// hold a standarr icon
this.myIcon;
// hold a green icon
this.myGreenIcon;
// hold a invisible
this.myInvisibleIcon;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
this.initialize = function() {
// map options - lots of options available here
var mapOptions = {
zoom: 5,
draggable: true,
center: new google.maps.LatLng(45.64378, -73.50497),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
this.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var markerData = data.technicians
for (var i = 0; i < markerData.length; i++) {
var myMarker = new google.maps.LatLng(markerData[i]['cityCntrLat'], markerData[i]['cityCntrLng']);
var myArray = {};
myArray = {
"available": markerData[i]['available']
};
this.fnPlaceMarkers(myArray, myMarker, markerData[i]['censusName'], "red");
}; // end for
};
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
this.fnPlaceMarkers = function(myArray, myLocation, myCityName, fillColour) {
// create SVG icon that looks like a flag
// The lowercase 'm' is "relative" moveto
// the lowercase 'z' closes the path
// more on SVG path command: http://www.w3.org/TR/SVG/paths.html
this.myIcon = {
path: 'M 0,0, 0,-40, 20,-30 , 0,-20, z',
fillColor: fillColour,
fillOpacity: 0.7,
scale: 1,
strokeColor: 'black',
strokeWeight: 1
};
// clone myIcon (not sure if there is better way to do this?)
this.myGreenIcon = jQuery.extend({}, this.myIcon);
this.myGreenIcon.fillColor = "green";
// clone myIcon
this.myInvisibleIcon = jQuery.extend({}, this.myIcon);
this.myInvisibleIcon.scale = 0;
// create marker and put it on map
var marker = new google.maps.Marker({
position: myLocation,
icon: this.myIcon,
map: this.map
});
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
// Close active window if exists
if (typeof Application.activeInfoWindow != 'undefined') {
Application.activeInfoWindow.close();
};
// Open InfoWindow
infoWnd.open(this.map, marker);
// Store new open InfoWindow in global variable
Application.activeInfoWindow = infoWnd;
});
// keep extra copy of marker info
marker.available = myArray['available'];
this.gmarkers_cities.push(marker);
} // end fucntion
// ------------------------------------------------------------------------------- //
// function to make markers bounce
// ------------------------------------------------------------------------------- //
this.fnMarkerBounce = function(i,myThis) {
// get radio button selected
var availability = $(myThis).val();
// turn off animation
myApplication.gmarkers_cities[i].setAnimation(null);
myApplication.gmarkers_cities[i].setIcon(myApplication.myIcon);
// find tech availability
var thisTech_availability = myApplication.gmarkers_cities[i]['available']
switch(availability) {
case "available-now":
if (thisTech_availability == 'now'){
myApplication.gmarkers_cities[i].setAnimation(google.maps.Animation.BOUNCE);
}
break;
case "available-later":
if (thisTech_availability == 'later'){
myApplication.gmarkers_cities[i].setAnimation(google.maps.Animation.BOUNCE);
}
break;
case "available-today":
myApplication.gmarkers_cities[i].setAnimation(google.maps.Animation.BOUNCE);
break;
default:
}
}
// ------------------------------------------------------------------------------- //
// function to make markers change color
// ------------------------------------------------------------------------------- //
this.fnMarkerChangeColor = function(i,myThis) {
// get radio button selected
var availability = $(myThis).val();
// turn off animation
myApplication.gmarkers_cities[i].setAnimation(null);
myApplication.gmarkers_cities[i].setIcon(myApplication.myIcon);
// find tech availability
var thisTech_availability = myApplication.gmarkers_cities[i]['available']
switch(availability) {
case "available-now":
if (thisTech_availability == 'now'){
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
}
break;
case "available-later":
if (thisTech_availability == 'later'){
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
}
break;
case "available-today":
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
break;
default:
}
}
// ------------------------------------------------------------------------------- //
// function to hide markers
// ------------------------------------------------------------------------------- //
this.fnMarkerHide = function(i,myThis) {
// get radio button selected
var availability = $(myThis).val();
// turn off animation
myApplication.gmarkers_cities[i].setAnimation(null);
myApplication.gmarkers_cities[i].setIcon(myApplication.myInvisibleIcon);
// find tech availability
var thisTech_availability = myApplication.gmarkers_cities[i]['available']
switch(availability) {
case "available-now":
if (thisTech_availability == 'now'){
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
}
break;
case "available-later":
if (thisTech_availability == 'later'){
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
}
break;
case "available-today":
myApplication.gmarkers_cities[i].setIcon(myApplication.myGreenIcon);
break;
default:
}
}
// ------------------------------------------------------------------------------- //
// some listeners
// ------------------------------------------------------------------------------- //
// user clicks on Store Open values
$("input:radio[name='rdtime']").change(function () {
// var x = $("input:radio[name=rdBehavior]:checked").value();
// alert(x);
var behavior = ($("input[name=rdBehavior]:checked").val());
for (var i = 0; i < myApplication.gmarkers_cities.length; i++) {
if(behavior == 'colorful'){
myApplication.fnMarkerChangeColor(i, this);
}
if(behavior == 'bouncy'){
myApplication.fnMarkerBounce(i, this);
}
if(behavior == 'hide'){
myApplication.fnMarkerHide(i, this);
}
}; // end for
}); // end listener
// ------------------------------------------------------------------------------- //
//
// ------------------------------------------------------------------------------- //
}; // end Application object
myApplication = new Application;
myApplication.initialize();
}); // end jquery
</script>
<a href="../index.php">BACK</a><br>
<br/>
<h3>Google map with multiple SVG markers - dynamically change Behaviors and Appearances</h3>
<ul>
<li>Click on a behavior</li>
<li>Click Store Open Criteria option to change markers</li>
</ul>
<table>
<tr>
<td colspan='2'>
Behavior:
<input class="rdtime" type="radio" name="rdBehavior" value="colorful"checked>Colorful
<input class="rdtime" type="radio" name="rdBehavior" value="bouncy" >Bouncy
<input class="rdtime" type="radio" name="rdBehavior" value="hide">Hide/Show
</td>
</tr>
<tr>
<td>
<div id="map-canvas"></div>
</td>
<td>
Store Open? <br/>
<span class="rdtime" >
<input class="rdtime" type="radio" name="rdtime" value="reset">No animation<br/>
<input class="rdtime" type="radio" name="rdtime" value="available-today" checked>Sometime today<br/>
<input class="rdtime" type="radio" name="rdtime" value="available-now">Right now<br/>
<input class="rdtime" type="radio" name="rdtime" value="available-later">Later today<br/>
</span>
<hr/>
<!-- Select SLA<br/>
<input type="radio" name="rdSLA" value="AnySLA" checked>All<br/>
<input type="radio" name="rdSLA" value="SLA90">90 mins or less<br/>
<input type="radio" name="rdSLA" value="FailedSLA">Failed<br/> -->
</td>
</tr>
</table>
</div><!--/span-->
</div><!--/row-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© ITP 2013</p>
</footer>
</body>
</html>