eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwMapy, markery, obrazki
Ilość wypowiedzi w tym wątku: 3

  • 1. Data: 2015-02-15 01:05:54
    Temat: Mapy, markery, obrazki
    Od: "Michal M. Lechanski" <m...@d...eu>

    Witam, mam taki kod jak poniżej I wszystko działa OK. To znaczy
    kliknięcie na markerze otwiera okienko informacyjne, w nim są
    wyświetlane miniatury, które po kliknięciu otwierają obrazek w tym samym
    oknie w którym jest mapa.
    Chciałbym jednak aby docelowy obrazek był wyświetlany z wykorzystaniem
    efektu Lightbox, niestety nie potrafię tego zrobić bo obrazki są
    zdefiniowane w <head> a nie w <body>.
    Jak przerobić poniższy kod by po kliknięciu miniaturki obrazek nie
    wyświetlał się w bieżącym oknie, ale w "okienku" Lightboxa (czy
    czegokolwiek działającego w tym stylu).

    Z góry dziękuje za pomoc.

    ===== KOD ======

    <!DOCTYPE html />
    <html>
    <head>
    <title>Markery</title>
    <link
    href='http://fonts.googleapis.com/css?family=Termina
    l+Dosis:800,600'
    rel='stylesheet' type='text/css'>
    <style type="text/css">
    body {
    font-family: 'Terminal Dosis', sans-serif;
    font-size: 18px;
    color: #333;
    background: #CCC; /* background color */
    padding: 0;
    margin: 10px 0px;
    overflow-y: scroll;
    }
    td {
    font-size: 18px;
    }
    h1 {
    text-align: center;
    font-family: 'Terminal Dosis', sans-serif;
    font-size: 60px;
    color: #EEEEEE;
    text-shadow: 0px -1px 0px #AAA, 0px 1px 0px #EEEEEE;
    margin: 0px 0px 20px 0px;
    }
    input {
    font-family: 'Terminal Dosis', sans-serif;
    font-size: 22px;
    padding: 7px 8px;
    border: 0px;
    box-shadow: 0px 0px 6px #999;
    border-radius: 10px;
    }
    input[type="text"] {
    width: 300px;
    }
    input[type="submit"] {
    padding: 6px 20px;
    margin-left: 10px;
    }
    #routeForm {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    }
    #directionsPanel {
    background: #FFFFFF;
    width: 800px;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0px 0px 6px #999;
    border-radius: 10px;
    font-size: 20px;
    }
    .adp-directions {
    width: 100%;
    }
    </style>
    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false
    "></script>
    <script type="text/javascript">
    var markers = [
    ['Obrazek 1<br> <a href="pic/pic1.jpg"><img
    src="pic/thumbs/pic1.jpg"></a>',35.155522, 33.361981],
    ['Obrazek 2, Obrazek 3<br> <a href="pic/pic2.jpg"><img
    src="pic/thumbs/pic 2.jpg"></a>&nbsp<a href="pic/pic3.jpg"><img
    src="pic/thumbs/pic3.jpg"></a>', 50.451029, 30.521704],
    ['Obrazek 4<br> <a href="pic/pic4.jpg"><img
    src="pic/thumbs/pic4.jpg"></a>', 46.562958, 16.453376]
    ];

    var markers2 = [
    ['Obrazek 6<br> <a href="pic/pic6.jpg"><img
    src="pic/thumbs/pic6.jpg"></a>', 50.019299, 22.675038],
    ];

    function initializeMaps() {
    var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
    };
    var map = new
    google.maps.Map(document.getElementById("map_canvas"
    ),myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) {
    var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(pos);
    marker = new google.maps.Marker({
    position: pos,
    icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.p
    ng",
    map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(markers[i][0]);
    infowindow.open(map, marker);
    }
    })(marker, i));
    }

    for (i = 0; i < markers2.length; i++) {
    var pos = new google.maps.LatLng(markers2[i][1], markers2[i][2]);
    bounds.extend(pos);
    marker2 = new google.maps.Marker({
    position: pos,
    icon: "http://maps.google.com/mapfiles/ms/icons/yellow-dot
    .png",
    map: map
    });
    google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
    return function() {
    infowindow.setContent(markers2[i][0]);
    infowindow.open(map, marker2);
    }
    })(marker2, i));
    }

    map.fitBounds(bounds);
    }
    </script>
    </head>
    <body onLoad="initializeMaps()">
    <h1>Markery</h1>
    <div id="map_canvas" style="width:100%; height:800px"></div>
    </body>
    </html>


    ================

    --
    The Mis'


  • 2. Data: 2015-02-15 14:32:56
    Temat: Re: Mapy, markery, obrazki
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Sun, 15 Feb 2015 00:05:54 +0000, Michal M. Lechanski napisał(a):

    > Jak przerobić poniższy kod by po kliknięciu miniaturki obrazek nie
    > wyświetlał się w bieżącym oknie, ale w "okienku" Lightboxa (czy
    > czegokolwiek działającego w tym stylu).

    Bierzesz jakiś skrypt a'la Lightbox (np. jqModal) i dodajesz na stronę.
    Później po prostu wpinasz się w tę funkcję:

    > google.maps.event.addListener(marker, 'click', (function(marker, i) {
    > return function() {
    > infowindow.setContent(markers[i][0]);
    > infowindow.open(map, marker);
    > }
    > })(marker, i));

    I zamiast operować na infowindow to wrzucasz te dane do okna modalnego i
    wyswietlasz to okno. To bardziej pytanie na grupę o JS.

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 3. Data: 2015-02-15 18:58:39
    Temat: Re: Mapy, markery, obrazki
    Od: "Michal M. Lechanski" <m...@d...eu>

    W dniu 15/02/2015 o 13:32, Borys Pogoreło pisze:
    > Dnia Sun, 15 Feb 2015 00:05:54 +0000, Michal M. Lechanski napisał(a):
    >

    > Bierzesz jakiś skrypt a'la Lightbox (np. jqModal) i dodajesz na stronę.
    > Później po prostu wpinasz się w tę funkcję:
    >
    >> google.maps.event.addListener(marker, 'click', (function(marker, i) {
    >> return function() {
    >> infowindow.setContent(markers[i][0]);
    >> infowindow.open(map, marker);
    >> }
    >> })(marker, i));
    >
    > I zamiast operować na infowindow to wrzucasz te dane do okna modalnego i
    > wyswietlasz to okno. To bardziej pytanie na grupę o JS.

    Dziękuję bardzo za odpowiedź. Co prawda jak głupi byłem tak głupi
    jestem, ale poczytam sobie o oknach modalnych, a potem pewnie i tak
    zapytam na odpowiedniej grupie. ;-)

    --
    The Mis'

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: