Hledáme testery pro manuální testování
Zobrazují se odpovědi 1 až 15 z 15

Google map popover

  1. Ahoj všem,

    nastyloval jsem si mapu a marker, dal jsem tam úvodní obrázek...teď je to custom marker...

    Volám ho v události, aby mi vyskočilo okénko kam později nahážu pár polí.

    A ono nechce vyskočit :)

    Jak mám definovat marker tak, aby to okénko vyskočilo nebo mám vytvoři jiný pop over ?


    Zde mapa s příkladem:
    Pronájem bytu v Berouně na závodí 1

    zde kod:

    Kód:
    
    <?php
    
        $api_key = '';
        $marker = get_field('obrazek-byty', $post_id);
        $location =  get_field('mapa_byty');
        $zoom = get_field('zoom');
        if ( $api_key && $location['lat'] && $location['lng'] ) { ?>
        <div id="map"></div>
        <script>
        
        
        
    function initMap() {
            
          //adapted from http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
    function CustomMarker(latlng, map, imageSrc) {
        this.latlng_ = latlng;
        this.imageSrc = imageSrc;
        // Once the LatLng and text are set, add the overlay to the map.  This will
        // trigger a call to panes_changed which should in turn call draw.
        this.setMap(map);
    }
    
    CustomMarker.prototype = new google.maps.OverlayView();
    
    CustomMarker.prototype.draw = function () {
        // Check if the div has been created.
        var div = this.div_;
        if (!div) {
            // Create a overlay text DIV
            div = this.div_ = document.createElement('div');
            // Create the DIV representing our CustomMarker
            div.className = "customMarker"
    
    
            var img = document.createElement("img");
            img.src = this.imageSrc;
            div.appendChild(img);
            google.maps.event.addDomListener(div, "click", function (event) {
                google.maps.event.trigger(me, "click");
            });
    
            // Then add the overlay to the DOM
            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
        }
    
        // Position the overlay 
        var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
        if (point) {
            div.style.left = point.x + 'px';
            div.style.top = point.y + 'px';
        }
    };
    
    CustomMarker.prototype.remove = function () {
        // Check if the overlay was on the map and needs to be removed.
        if (this.div_) {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        }
    };
    
    CustomMarker.prototype.getPosition = function () {
        return this.latlng_;
    };
    
    
      // Styles a map in silver mode.
            var yourplace = {lat: <?php echo $location['lat']; ?>, lng: <?php echo $location['lng']; ?>};
            var map = new google.maps.Map(document.getElementById('map'), {
              center: yourplace,
              scrollwheel: false,
              <?php
              // The higher the number the closer the zoom
              if ( $zoom ) {
                  echo 'zoom: ' . $zoom . ',' . PHP_EOL;
              } else {
                  echo 'zoom: 14,';
              }
              echo 'draggable: true,' . PHP_EOL; // This is in place for mobile devices if you are using mobile-detect wrap it in a if $mobile query
              // Next up the map styling, use the Google Map Style generator
              ?>
              styles: [{
                "elementType": "geometry",
                "stylers": [{
                  "color": "#f5f5f5"
                }]
              }, {
                "elementType": "labels.icon",
                "stylers": [{
                  "visibility": "off"
                }]
              }, {
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#616161"
                }]
              }, {
                "elementType": "labels.text.stroke",
                "stylers": [{
                  "color": "#f5f5f5"
                }]
              }, {
                "featureType": "administrative.land_parcel",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#bdbdbd"
                }]
              }, {
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#eeeeee"
                }]
              }, {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#757575"
                }]
              }, {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#e5e5e5"
                }]
              }, {
                "featureType": "poi.park",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#9e9e9e"
                }]
              }, {
                "featureType": "road",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#ffffff"
                }]
              }, {
                "featureType": "road.arterial",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#757575"
                }]
              }, {
                "featureType": "road.highway",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#dadada"
                }]
              }, {
                "featureType": "road.highway",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#616161"
                }]
              }, {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#9e9e9e"
                }]
              }, {
                "featureType": "transit.line",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#e5e5e5"
                }]
              }, {
                "featureType": "transit.station",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#eeeeee"
                }]
              }, {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [{
                  "color": "#c9c9c9"
                }]
              }, {
                "featureType": "water",
                "elementType": "labels.text.fill",
                "stylers": [{
                  "color": "#9e9e9e"
                }]
              }]
            });
            
    
    var data = [{
        profileImage: "<?php echo $marker; ?>",
        position: yourplace,
    }]
    
    for(var i=0;i<data.length;i++){
    new CustomMarker(new google.maps.LatLng(data[i].position), map,  data[i].profileImage)
    }   
    
         
    
     
       var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                'sandstone rock formation in the southern part of the '+
                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                'Aboriginal people of the area. It has many springs, waterholes, '+
                'rock caves and ancient paintings. Uluru is listed as a World '+
                'Heritage Site.</p>'+
                '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                '(last visited June 22, 2009).</p>'+
                '</div>'+
                '</div>';
           
        var infowindow = new google.maps.InfoWindow({
              content: contentString
            });
            
        CustomMarker.addListener('click', function() {
              infowindow.open(map, CustomMarker);
            });
         
            
        
            
          
            <?php } ?>
           
          }
        </script>
        <?php 
        echo '<script src="https://maps.googleapis.com/maps/api/js?key=' . $api_key . '&callback=initMap" async defer></script>';
       
    ?>

  2. Co se právě děje na Webtrhu?
  3. pokud tahle funkce "function initMap()" ma uzavirat vsechny ostatni... tak ti to koliduje s php... musis to prohodit...

    Kód:
     
          }
        </script>
    
           <?php } ?>

  4. Už jsem to prohodil a v konzoli přibyla chyba..

    ---------- Příspěvek doplněn 29.05.2018 v 10:38 ----------

    Ta chyba je ten click... chápu..

    ---------- Příspěvek doplněn 29.05.2018 v 10:57 ----------

    Připojil jsem to tam takhle a zmizelo, že je to funkce..., ale chybu po clicku tam pořád mám.., co definovat do argumentu , je to argument, map, CustomMarker ?

    CustomMarker.prototype.addListener('click', function() {
    infowindow.open(map, CustomMarker);
    });


  5. Citace Původně odeslal Shopines Zobrazit příspěvek
    Jo to jsem viděl, ale já mám custom marker.... ne marker...

  6. Citace Původně odeslal PetrGargulák Zobrazit příspěvek
    Jo to jsem viděl, ale já mám custom marker.... ne marker...
    doplnil jsem to https://developers.google.com/maps/d...es/icon-simple

  7. Citace Původně odeslal Shopines Zobrazit příspěvek
    Jenomže já potřebuji mít ten marker nastylovaný takhle ho nastyluji hrozně těžce, nebude lepší tam dát poover přes jquery na kliknutí do divu ?

    ---------- Příspěvek doplněn 29.05.2018 v 11:17 ----------

    Citace Původně odeslal Shopines Zobrazit příspěvek
    Nebo proč to na kliknutí reaguje tak jak reaguje... ?

    ReferenceError: me is not defined[Zjistit více]
    test-bytu2:629:13
    initMap/CustomMarker.prototype.draw/<

  8. vysledek -> https://michal.sixta.cz/tmp/map/map.php

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
    height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    </style>
    </head>
    <body>



    <div id="map"></div>
    <?php

    $api_key = 'AIzaSyBnWhato3p7JhkOjk9f45WdlXYWeMEhYCY';

    ?>
    <div id="map"></div>
    <script>

    function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru,
    styles: [{
    "elementType": "geometry",
    "stylers": [{
    "color": "#f5f5f5"
    }]
    }, {
    "elementType": "labels.icon",
    "stylers": [{
    "visibility": "off"
    }]
    }, {
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#616161"
    }]
    }, {
    "elementType": "labels.text.stroke",
    "stylers": [{
    "color": "#f5f5f5"
    }]
    }, {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#bdbdbd"
    }]
    }, {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [{
    "color": "#eeeeee"
    }]
    }, {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#757575"
    }]
    }, {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{
    "color": "#e5e5e5"
    }]
    }, {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#9e9e9e"
    }]
    }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
    "color": "#ffffff"
    }]
    }, {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#757575"
    }]
    }, {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [{
    "color": "#dadada"
    }]
    }, {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#616161"
    }]
    }, {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#9e9e9e"
    }]
    }, {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [{
    "color": "#e5e5e5"
    }]
    }, {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [{
    "color": "#eeeeee"
    }]
    }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{
    "color": "#c9c9c9"
    }]
    }, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [{
    "color": "#9e9e9e"
    }]
    }]
    });

    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var beachMarker = new google.maps.Marker({
    position: uluru,
    map: map,
    icon: image
    });

    var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
    '(last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });


    beachMarker.addListener('click', function() {
    infowindow.open(map, beachMarker);
    });
    }
    </script>



    <?php
    echo '<script src="https://maps.googleapis.com/maps/api/js?key=' . $api_key . '&callback=initMap" async defer></script>';

    ?>
    </body>
    </html>

  9. Citace Původně odeslal Shopines Zobrazit příspěvek
    Hezký, ale nedám tam box shadow, zaoblený rohy 50 % a border.


  10. Citace Původně odeslal Shopines Zobrazit příspěvek
    :)) Ty si fakt šikovnej... poslal jsem ti mejla koukni na to.

  11. nic neprislo :)

  12. Citace Původně odeslal Shopines Zobrazit příspěvek
    nic neprislo :)
    Tak mi pošli email... já jsem to psal na ten co máš v infu... michal@sixta.cz

  13. Citace Původně odeslal PetrGargulák Zobrazit příspěvek
    Tak mi pošli email... já jsem to psal na ten co máš v infu... michal@sixta.cz
    ten je spravny

  14. Citace Původně odeslal Shopines Zobrazit příspěvek
    ten je spravny
    Tak zkus poslat email mě... gargulakpetr@seznam.cz

Hostujeme u Server powered by TELE3