tabbed infowindow in google map V3

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 26 Φεβ 2012 03:35

prospathw na valw tab mesa sta info window alla an kai prosthesa kapoia kommatia kwdika den doyleyei tipota, kai oyte kollaei o xartis apla mou emfanizei oti kai prin. parathetw kai ton kwdika kai me kokkino ta extra kommatia kwdika gia ta tab. vlepei kaneis kapoio lathos?? ton kwdika ton pira apo ena paradeigma pou eida edw www.easypagez.com/maps/tabbed.html


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>wifi</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3. ... "></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript" src="js/infowindowcss.js"></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/ ... "></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/ ... "></script>
<script src='http://j.maxmind.com/app/geoip.js' type='text/javascript'></script>

<script type="text/javascript">
var mtypes = [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];
var side_bar_html = "";
var gmarkers = [];
var infowindow;
var map = null;
var gicons = [];
var infoBubble;

var markerShadow = new google.maps.MarkerImage(
"images/shadow.png",
new google.maps.Size(54,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

function createMarker(name, latlng, icon, markerShadow, address, html, category, infoBubble, zoom) {

var contentString = html;

// add the zoom links
contentString += '<br><a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(15);">Zoom To</a>';
contentString += ' - <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
contentString += ' - <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

infoBubble = new InfoBubble({
map : map,
maxWidth : 400,
minWidth : 150,
maxHeight : 300,
minHeight : 50,
shadowStyle : 1,
padding : 10,
backgroundColor : '#ffddff',
borderRadius : 20,
arrowSize : 15,
borderWidth : 3,
borderColor : '#ff0077',
disableAutoPan : false,
hideCloseButton : false,
arrowPosition : 50,
arrowStyle : 0
});

var markerIcon = new google.maps.MarkerImage(
icon,
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

var marker = new google.maps.Marker({
position: latlng,
map: map,
icon:markerIcon,
shadow:markerShadow,
title:address,
animation:google.maps.Animation.DROP
});

google.maps.event.addListener(map, 'click', function() {
infowindow.close(map, marker);
marker.setAnimation(null);
});

infoBubble.addTab('info window', contentString);

google.maps.event.addListener(infoBubble, 'domready', function() {
$("#tabs").tabs();
});


google.maps.event.addListener(infoBubble,'closeclick',function(){
marker.setAnimation(null);
});

google.maps.event.addListener(marker, 'click', function () {
if (infowindow) {
infowindow.close(map, marker);
marker.setAnimation(null); }
infowindow = infoBubble;
marker.setAnimation(google.maps.Animation.BOUNCE );
var div = document.createElement('div');
div.innerHTML = html;
$(div).tabs();
infoBubble.setContent(div);

infowindow.open(map, marker);
marker.openInfoWindowHtml('Click the (+) to maximize me!', {
maxTitle: 'Maximized Title',
maxContent: 'Maximized content text.'
});
});

marker.MyZoom = zoom;
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);

// add a line to the side_bar html
makeSidebar();
return marker;
}


// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers.mycategory == category) {
gmarkers.setVisible(true);
}
}
makeSidebar();
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers.mycategory == category) {
gmarkers.setVisible(false);
}
}
makeSidebar();
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
}

// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
if (infowindow){
infowindow.close();
marker.setAnimation(null);
}
}

function myclick(i) {
google.maps.event.trigger(gmarkers, 'click');
map.setCenter(gmarkers.position);
}

function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers.getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers.myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}


function initialize() {
var myLatlng = new google.maps.LatLng(41.084316, 23.546791);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: mtypes
},
zoomControl: true,
zoomControlOptions:
{
position: google.maps.ControlPosition.LEFT_CENTER,
style: google.maps.ZoomControlStyle.DEFAULT
}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

<!-- var markersArray = []; -->
downloadUrl("markers.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var desc = markers[i].getAttribute("desc");
var zoom = markers[i].getAttribute("zoom");
var icon1 = markers[i].getAttribute("icon1");
var icon2 = markers[i].getAttribute("icon2");
var html = address + "<br><b>Σημείο " + name + "</b><br><br><img src= " + icon1 + " border=1 /><img src= " + icon2 + " border=1 /><br><p>Διεύθυνση : " + address + "<br>" + desc ;

var tab2 ='keimeno 2';
var tab3 ='keimeno 3';
var tab4 ='keimeno 4';
var iwstructure ='';
iwstructure +='<div id="tabs">';
iwstructure +='<ul>';
iwstructure +='<li><a href="#tabs-1">Description</a></li>';
iwstructure +='<li><a href="#tabs-2">Video</a></li>';
iwstructure +='<li><a href="#tabs-3">Photos</a></li>';
iwstructure +='<li><a href="#tabs-4">Contact</a></li>';

iwstructure +='</ul>';
iwstructure +='<div id="tabs-1">'+html+'</div>';
iwstructure +='<div id="tabs-2">'+tab2+'</div>';
iwstructure +='<div id="tabs-3">'+tab3+'</div>';
iwstructure +='<div id="tabs-4">'+tab4+'</div>';
iwstructure +='</div>';


var category = markers[i].getAttribute("category");
if (!zoom) zoom = 15;
var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("icon"), markerShadow, markers[i].getAttribute("address"), html, category, zoom, iwstructure, tab2, tab3, tab4);
<!-- markersArray.push(marker); -->

}
hide("theatre");
hide("golf");
hide("info");
makeSidebar();
<!-- var markerCluster = new MarkerClusterer(map, markersArray); -->
});
}

</script>
</head>
<body onload="initialize()">
<table border="0" cellspacing="5" cellpadding="0" bordercolor="#000000" bgcolor="#ffffff" height="500">
<tr><td bordercolor="#000000" bgcolor="#EBEBEB" valign="top">
<div id="map_canvas" style="width: 800px; height: 500px"></div>
</td>
<td valign="top" bgcolor="#EBEBEB" style="width:350px; text-decoration: underline; color: #4444ff;">
<div id="side_bar" style="overflow:auto; height:500px;"></div>
</td>
</tr>
</table>

<form action="#">
one: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
two: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
three: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
</form>
</body>
</html>[/code][i]

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

tabbed infowindow in google map V3

Δημοσίευση από fafos » 26 Φεβ 2012 05:45

exeis ksexasei to css style ton tabs.. koitaxe pali ton kodika pou dinei autos h to diko mou paradeigma: http://istopoli.com/tuts/gmv3/infoboxUI.html
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 26 Φεβ 2012 06:33

fafos έγραψε:exeis ksexasei to css style ton tabs.. koitaxe pali ton kodika pou dinei autos h to diko mou paradeigma: http://istopoli.com/tuts/gmv3/infoboxUI.html
prosthesa ayto to kommati kai apla esvisa to #map1,#map2{display:none} alla pali tipota

Κώδικας: Επιλογή όλων

<style type="text/css">
#tabs ul li&#123;font-size&#58;60%&#125;
#tabs&#123;width&#58;340px;font-size&#58;100%;border&#58;0px solid #000000;&#125;
#tabs-1,#tabs-2,#tabs-3,#tabs-4&#123;width&#58;300px;height&#58;250px;overflow&#58;auto;font-size&#58;80%&#125;
#hidetabs&#123;width&#58;1px;height&#58;1px;color&#58;#ffffff;overflow&#58;hidden;&#125;
#sidewrap&#123;display&#58;none;&#125;
#panelwrap&#123;display&#58;none;&#125;#hidetabs&#123;width&#58;1px;height&#58;1px;color&#58;#ffffff;overflow&#58;hidden;&#125;
#map1,#map2&#123;display&#58;none&#125;
</style>
episis pira kai apo to paradeigmma soy to css/tabs.css kai to prosthesa

Κώδικας: Επιλογή όλων

<link href="css/tabs.css" rel="stylesheet" type="text/css"/>
alla pali tipota...

sto paradeigma soy ta tabs einai stathera kai oxi apo xml file, fenetai pio dyskolo to diko sou paradeigma...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

tabbed infowindow in google map V3

Δημοσίευση από fafos » 26 Φεβ 2012 07:01

auto to exeis ston kodika?

Κώδικας: Επιλογή όλων

<link type="text/css" href="http&#58;//gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 26 Φεβ 2012 19:12

fafos έγραψε:auto to exeis ston kodika?

Κώδικας: Επιλογή όλων

<link type="text/css" href="http&#58;//gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
den to eixa alla to dokimasa kai me to diko sou alla kai me to allo paradeigma alla den doylepse

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 29 Φεβ 2012 06:20

mas efage to ksenyxti panw stous google maps!!! pragmatika tha skasw... :( ti tis exoyme kanei tis google kai mas vasanizei etsi???
kai ta dyo paradeigmata moy aresan poly kai me tabbed istopoli.com/tuts/gmv3/infoboxUI.html kai me accordion istopoli.com/tuts/gmv3/infoboxUIac.html alla to thema einai oti an xrisimopoioyme apla ena marker ginete aplo, otan omws egw thelw na xrisimopoiisw xml kai Custom InfoWindows ta pragmata mplekontai!!! ston kwdika poy edwsa pio panw ena lathos poy exw einai oti h nea metavliti html einai i iwstructure kai auti tha prepei na tin dwsw stin

Κώδικας: Επιλογή όλων

 var contentString = iwstructure ;
... alla twra moy emfanizete to keimeno apo to tab2, kapoia voithia????
Sergey Brin??? Larry Page???

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

tabbed infowindow in google map V3

Δημοσίευση από fafos » 01 Μαρ 2012 16:45

des auto: http://istopoli.com/tuts/weathergooglemap/?l=gr

to lathos sou pisteuo oti einai oti prospatheis na trexeis 2 eidon infowindow.. 1 infobubble kai 1 me tabs..

sto paradeigma pou sou dino (ta dedomena kairou den einai sosta) xrhsimopoio thn markerclusterer gia omadopoihsh ton markers alla mporeis na xrhsimopoihseis kai markersmanager h aplo bound.. akoma.. h diafora edo einai oti tous markers tous pairnei apo to xml (eikonidia kairou) kai to 2o tab (provlepsi) to exo na emfanizetai dynamika me to pathma (den trexei dhladh me to load tou map alla me ajax load)..

to sidebar den to emfanizo me javascript kodika ston xarth alla me php kano parse sto xml...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 01 Μαρ 2012 20:16

fafos έγραψε:to lathos sou pisteuo oti einai oti prospatheis na trexeis 2 eidon infowindow.. 1 infobubble kai 1 me tabs..
ayto pou to vlepeis ston kwdika?? ta tabs einai ksexwrista infowindow?? mporw na prosthesw ta tabs mesa sto infobubble poy dimioyrgisa??

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

tabbed infowindow in google map V3

Δημοσίευση από fafos » 01 Μαρ 2012 20:29

tattooiv έγραψε: ayto pou to vlepeis ston kwdika?? ta tabs einai ksexwrista infowindow?? mporw na prosthesw ta tabs mesa sto infobubble poy dimioyrgisa??
Gia poion logo na to kaneis auto? ta tabs einai ena aplo div layer... opos thes to ftiaxneis me to analogo style.. mporei na mpoun ta tabs mesa sto infobubble alla den xero an trexoun ta tabs logo sygkroushs ths jquery me ton js kodika tou bubble..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

tabbed infowindow in google map V3

Δημοσίευση από tattooiv » 01 Μαρ 2012 20:49

fafos έγραψε:Gia poion logo na to kaneis auto? ta tabs einai ena aplo div layer... opos thes to ftiaxneis me to analogo style.. mporei na mpoun ta tabs mesa sto infobubble alla den xero an trexoun ta tabs logo sygkroushs ths jquery me ton js kodika tou bubble..
diladi an vgalw apo ton kwdika to infobubble poy dimioyrgisa tha treksxoyn kanonika ta tabs??

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

tabbed infowindow in google map V3

Δημοσίευση από fafos » 01 Μαρ 2012 21:37

tattooiv έγραψε:diladi an vgalw apo ton kwdika to infobubble poy dimioyrgisa tha treksxoyn kanonika ta tabs??
den gnorizo ti allo mporei na prokypsei me ton kodika sou.. an vgales to infobubble aplos xrhsimopoieis ton kodika ths selidas pou dineis sto proto post h auton pou dino ego me ton kairo (sto diko mou isos dyskoleuteis ligo me to style)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης