Modified info window in Google maps :)
var label = new Label({
map: map
});
label.set('zIndex',
1234);
label.bindTo('position',
marker, 'position');
label.set('text', '<div
class="graphContainer" style="background-color:' + color
+ '"><input type="hidden"
value=' +Zip + ' /> Total House Owners ::
' + CountHouseOwner + '</div>');
Because of that ‘m getting a div rest of the
part is mine, Show div on mouse over, hide, move with mouse,Custom background
depending on value,Chart ... a few i also done here it goes
$(document).ready(function() {
$('.graphContainer').live("mouseover", function(e)
{
showPopup("(" + $(this).find('input[type=hidden]').val() + ")", e);
//alert(eval($(this).find('input[type=hidden]').val()));
});
$('.graphContainer').live("mouseout", function()
{
hidePopup();
});
$('.graphContainer').live("mousemove", function(e)
{
movePopup(e);
});
});
function showPopup(Zip,
position) {
var Query
= document.getElementById('<%=
hdnwithlevel.ClientID %>').value;
//
alert(Query);
Query = eval(Query);
var tbl;
Zip = Zip.replace('(', '');
Zip = Zip.replace(')', '');
tbl = '<table
class="tipInfo">';
for (var i = 0; i < Query.length; i++) {
var info
= Query[i];
if (info.Zip
== Zip) {
tbl = tbl + '<tr>';
tbl = tbl + '<td>';
tbl = tbl + 'Counseling Level ' + info.CounselingLevel;
tbl = tbl + '</td>';
tbl = tbl + '<td> : ' + info.HouseOwner + ' Home Owners';
tbl = tbl + '</td>';
tbl = tbl + ' </tr>';
}
}
tbl = tbl + ' </table>';
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY });
$('.details').append(tbl);
$('.details').show();
}
function hidePopup()
{
$('.details').empty();
$('.details').hide();
}
function movePopup(position)
{
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY }); //background-color:
#FF9D00;
}
Oops i forgot abt it Label its a plugin i got
from my friend mapsupport.js that helps a lot to achieve this
var label = new Label({
map: map
});
label.set('zIndex',
1234);
label.bindTo('position',
marker, 'position');
label.set('text', '<div
class="graphContainer" style="background-color:' + color
+ '"><input type="hidden"
value=' +Zip + ' /> Total House Owners ::
' + CountHouseOwner + '</div>');
Because of that ‘m getting a div rest of the
part is mine, Show div on mouse over, hide, move with mouse,Custom background
depending on value,Chart ... a few i also done here it goes
$(document).ready(function() {
$('.graphContainer').live("mouseover", function(e)
{
showPopup("(" + $(this).find('input[type=hidden]').val() + ")", e);
//alert(eval($(this).find('input[type=hidden]').val()));
});
$('.graphContainer').live("mouseout", function()
{
hidePopup();
});
$('.graphContainer').live("mousemove", function(e)
{
movePopup(e);
});
});
function showPopup(Zip,
position) {
var Query
= document.getElementById('<%=
hdnwithlevel.ClientID %>').value;
//
alert(Query);
Query = eval(Query);
var tbl;
Zip = Zip.replace('(', '');
Zip = Zip.replace(')', '');
tbl = '<table
class="tipInfo">';
for (var i = 0; i < Query.length; i++) {
var info
= Query[i];
if (info.Zip
== Zip) {
tbl = tbl + '<tr>';
tbl = tbl + '<td>';
tbl = tbl + 'Counseling Level ' + info.CounselingLevel;
tbl = tbl + '</td>';
tbl = tbl + '<td> : ' + info.HouseOwner + ' Home Owners';
tbl = tbl + '</td>';
tbl = tbl + ' </tr>';
}
}
tbl = tbl + ' </table>';
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY });
$('.details').append(tbl);
$('.details').show();
}
function hidePopup()
{
$('.details').empty();
$('.details').hide();
}
function movePopup(position)
{
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY }); //background-color:
#FF9D00;
}
Oops i forgot abt it Label its a plugin i got
from my friend mapsupport.js that helps a lot to achive this
Entire map code [dont copy paste this. its
working in my logic. so modify logically and go on .use this for refernce only]
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
<script type="text/javascript">
var
data = [];
function
init() {
//
alert('hai')
var
mapCenter = new google.maps.LatLng(0, 0);
var
map = new
google.maps.Map(document.getElementById('map'),
{
'zoom':
5,
'center':
mapCenter,
'mapTypeId':
google.maps.MapTypeId.ROADMAP
});
//
debugger;
var
summary = document.getElementById('<%=
hdnwithOutlevel.ClientID %>').value;
var
summaryWithLevel = document.getElementById('<%=
hdnwithlevel.ClientID %>').value;
summary = eval(summary);
summaryWithLevel =
eval(summaryWithLevel);
//
alert(summary.length);
var
image = new google.maps.MarkerImage('../../Scripts/Images/navsubg.png',
new
google.maps.Size(20, 32),
new
google.maps.Point(0, 0),
new
google.maps.Point(0, 32));
var
shadow = new google.maps.MarkerImage('../../Scripts/Images/beachflag_shadow.png',
new
google.maps.Size(37, 32),
new
google.maps.Point(0, 0),
new
google.maps.Point(0, 32));
var
shape = {
coord: [1, 1, 1, 20, 18, 20,
18, 1],
type: 'poly'
};
var
bounds = new google.maps.LatLngBounds();
for
(var c = 0; c < summary.length; c++) {
//
debugger;
var
info = summary[c];
var
CountHouseOwner = 0;
var
status = false;
for
(var k = 0; k < summaryWithLevel.length;
k++) {
var
infoWithlevel = summaryWithLevel[k];
if
(info.Zip == infoWithlevel.Zip) {
CountHouseOwner =
CountHouseOwner + infoWithlevel.HouseOwner;
status = true;
}
}
if
(status == true) {
var
myLatLng = new
google.maps.LatLng(info.Latitude, info.Longitude);
var
marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: info.Zip,
animation:
google.maps.Animation.DROP
});
bounds.extend(myLatLng);
var
label = new Label({
map: map
});
label.set('zIndex',
1234);
label.bindTo('position', marker, 'position');
var
color;
var
Count = Number(CountHouseOwner);
//
var Count = 55;
if
(Count < 10)
color = '#FAC8C9';
else
if (Count > 10 && Count < 50)
color = '#F59FA1';
else
if (Count > 50 && Count < 100)
color = '#F57D7F';
else
if (Count > 100 && Count < 200)
color = '#F25A5C';
else
if (Count > 200 && Count < 500)
color = '#F23D40';
else
if (Count > 500 && Count < 1000)
color = '#F22428';
else
if (Count > 1000 && Count < 2000)
color = '#F00C10';
else
color = '#FF0004';
label.set('text', '<div class="graphContainer"
style="background-color:' + color + '"><input
type="hidden" value=' + info.Zip + '
/> Total Home Owners : ' + CountHouseOwner + '</div>');
}
}
//
debugger;
document.getElementById('<%= HdnMapMId.ClientID %>').value = bounds;
map.fitBounds(bounds);
}
//google.maps.event.addDomListener(window,
'load', init);
$(document).ready(function() {
$('.graphContainer').live("mouseover", function(e)
{
showPopup("(" + $(this).find('input[type=hidden]').val() + ")", e);
//alert(eval($(this).find('input[type=hidden]').val()));
});
$('.graphContainer').live("mouseout", function()
{
hidePopup();
});
$('.graphContainer').live("mousemove", function(e)
{
movePopup(e);
});
});
function showPopup(Zip,
position) {
var Query
= document.getElementById('<%=
hdnwithlevel.ClientID %>').value;
//
alert(Query);
Query = eval(Query);
var tbl;
Zip = Zip.replace('(', '');
Zip = Zip.replace(')', '');
tbl = '<table
class="tipInfo">';
for (var i = 0; i < Query.length; i++) {
var info
= Query[i];
if (info.Zip
== Zip) {
tbl = tbl + '<tr>';
tbl = tbl + '<td>';
tbl = tbl + 'Counseling Level ' + info.CounselingLevel;
tbl = tbl + '</td>';
tbl = tbl + '<td> : ' + info.HouseOwner + ' Home Owners';
tbl = tbl + '</td>';
tbl = tbl + ' </tr>';
}
}
tbl = tbl + ' </table>';
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY });
$('.details').append(tbl);
$('.details').show();
}
function hidePopup()
{
$('.details').empty();
$('.details').hide();
}
function movePopup(position)
{
$('.details').css({
'left': position.pageX + 15, 'top': position.pageY }); //background-color:
#FF9D00;
}
</script>
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment