|
Location Type all warehouse mall kiosk head office |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Google Map with two Markers with InfoWindows - Update contents when marker is clicked</title>
<style>
body{
padding:20px
font-family: Arial;
font-size: 16px;
}
#map-canvas {
height: 350px;
width: 600px;
}
pre {
border:1px solid #D6E0F5;
padding:5px;
margin:5px;
background:#EBF0FA;
}
table {
border-collapse: collapse;
}
td{ border: 1px solid #B0B0B0;
padding: 5px;
background-color: #F8F8F8;
vertical-align: top;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="data.json" type="text/javascript"></script>
<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_stores = [];
// hold a standard icon
this.myIcon;
// hold a invisible icon
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'],
"storetype": markerData[i]['storetype']
};
this.fnPlaceMarkers(myArray, myMarker, markerData[i]['censusName'], "Blue");
}; // 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',
// path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 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.myPaleBlueIcon = jQuery.extend({}, this.myIcon);
this.myPaleBlueIcon.fillColor = "#CCFFFF";
this.myBlueIcon = jQuery.extend({}, this.myIcon);
this.myBlueIcon.fillColor = "blue";
// 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,
zIndex: 1
});
// store my extra information on the marker
marker.myAttributes = myArray;
// keep extra copy of marker info
this.gmarkers_stores.push(marker);
} // end function
// ------------------------------------------------------------------------------- //
// LISTENERS
// ------------------------------------------------------------------------------- //
// capture requested store type
$("input:radio[name='storetype']").change(function () {
// save array in temporary variable
var markerArray = myApplication.gmarkers_stores;
// iterate through array of markers
for (x=0;x < markerArray.length; x++){
if(this.value == markerArray[x].myAttributes.storetype){
markerArray[x].setIcon(myApplication.myBlueIcon);
}
else if(this.value == 'all'){
markerArray[x].setIcon(myApplication.myBlueIcon);
}
else{
markerArray[x].setIcon(myApplication.myInvisibleIcon);
var currentZ = markerArray[x].get('zIndex');
markerArray[x].set('zIndex', currentZ-10);
}
}
});
}; // 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 - hide and show markers based on data attributes</h3>
<ul>
<li>Click on radio button to hide and show markers</li>
</ul>
<table>
<tr>
<td>
<div id="map-canvas"></div>
</td>
<td>
Location Type <br/>
<span class="rdImage" >
<input class="rdImage" type="radio" name="storetype" value="all" checked>all<br/>
<input class="rdImage" type="radio" name="storetype" value="warehouse">warehouse<br/>
<input class="rdImage" type="radio" name="storetype" value="mall">mall<br/>
<input class="rdImage" type="radio" name="storetype" value="kiosk" checked>kiosk<br/>
<input class="rdImage" type="radio" name="storetype" value="headoffice" checked>head office<br/>
</span>
<hr/>
</td>
</tr>
</table>
<br/>