demo.add(function () is undefined
Praveena S
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="one.aspx.cs" Inherits="FilterPushpins.one" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%
--<meta charset="utf-8">
<meta htt--p-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--
%>
<title>Filter Bing maps pushpins by property - jQuery Bing maps</title>
<meta name="description" content="An example of how to filter markers by different criterias using jQuery Bing maps v7 for web and mobile" />
<meta name="author" content="Johan Säll Larsson" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC.title" content="Filter Bing maps pushpins by property - jQuery Bing maps" />
<meta name="DC.description" content="An example of how to filter markers by different criterias using jQuery Bing maps v7 for web and mobile" />
<meta name="DC.creator" content="Johan Säll Larsson" />
<meta name="DC.language" content="en" />
<link type="text/css" rel="stylesheet" href="CSS/960.css" />
<link type="text/css" rel="stylesheet" href="CSS/960_16_col.css" />
<link type="text/css" rel="stylesheet" href="CSS/normalize.css" />
<link type="text/css" rel="stylesheet" href="CSS/prettify.css" />
<link type="text/css" rel="stylesheet" href="CSS/demo.css" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.ui.bmap.js"/>
<script src="Scripts/jquery.ui.bmap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/modernizr.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/underscore-min.js"></script>
<script type="text/javascript" src="Scripts/backbone-min.js"></script>
<script type="text/javascript" src="Scripts/prettify.min.js"></script>
<script type="text/javascript" src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jquery.ui.bmap.min.js"></script>
<script type="text/javascript">
$(
function () {
demo.add(
function () {
debugger
$(
'#map_canvas').gmap(jQuery.extend({ 'callback': function () {
var self = this;
debugger
var map = self.get('map');
var bounds = map.getBounds();
var southWest = bounds.getSoutheast();
var northEast = bounds.getNorthwest();
var lngSpan = northEast.longitude - southWest.longitude;
var latSpan = northEast.latitude - southWest.latitude;
var images = ['http://google-maps-icons.googlecode.com/files/friends.png', 'http://google-maps-icons.googlecode.com/files/home.png', 'http://google-maps-icons.googlecode.com/files/girlfriend.png', 'http://google-maps-icons.googlecode.com/files/dates.png', 'http://google-maps-icons.googlecode.com/files/realestate.png', 'http://google-maps-icons.googlecode.com/files/apartment.png', 'http://google-maps-icons.googlecode.com/files/family.png'];
var tags = ['jQuery', 'Google maps', 'Plugin', 'SEO', 'Reddit', 'Homer', 'Bart', 'Lisa', 'Marge', 'Maggie'];
$(
'#tags').append('<option value="all">All</option>');
$.each(tags,
function (i, tag) {
$(
'#tags').append('<option value="' + tag + '">' + tag + '</option>');
});
for (i = 0; i < 50; i++) {
var temp = [];
for (j = 0; j < Math.random() * 5; j++) {
temp.push(tags[Math.floor(Math.random() * 10)]);
}
self.addMarker({
'id': 'm_' + i, 'icon': images[(Math.floor(Math.random() * 7))], 'height': 37, 'width': 32, 'tags': temp.toString(), 'bounds': true, 'location': new Microsoft.Maps.Location(southWest.latitude + latSpan * Math.random(), southWest.longitude + lngSpan * Math.random()) }).click(function () {
self.openInfoWindow({
'title': 'Tags', 'description': this.target.tags }, this);
});
}
self.addControl(
'filter_control', 2);
$(
"#tags").change(function () {
var tag = $(this).val();
self.set(
'bounds', null);
if (self.get('iw') != null) {
self.get(
'iw').setOptions({ 'visible': false });
}
if (tag == 'all') {
self.find(
'markers', { 'property': 'tags', 'value': tag }, function (marker, found) {
marker.setOptions({
'visible': true });
self.addBounds(marker.getLocation());
});
}
else {
self.find(
'markers', { 'property': 'tags', 'value': tag, 'delimiter': ',' }, function (marker, found) {
if (found) {
marker.setOptions({
'visible': true });
self.addBounds(marker.getLocation());
}
else {
marker.setOptions({
'visible': false });
}
});
}
});
}
}, demo.mapOptions));
}).load();
});
</script>
</head>
<body>
<div class="container_16">
<div class="item rounded dark">
<div id="map_canvas"></div>
<div id="filter_control" class="item gradient rounded shadow">
<label for="tags">Filter by tag</label>
<select id="tags"></select>
</div>
</div>
</div>
</body>
</
html>