Google map popover

29.05.2018 10:05

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>';
   
?>

Co se právě děje na Webtrhu?

Sikec poptává: Poptávka VBA/makra pro EXCEL (Office 365, cz verze)
Man4web poptává: Prepojenie Money S3 - Shoptet
Eliaš - IT Solutions poptává: Hľadám.NET vývojára - Remote

29.05.2018 10:28

(33 hodnocení)

2

29.05.2018 10:28

pokud tahle funkce "function initMap()" ma uzavirat vsechny ostatni... tak ti to koliduje s php... musis to prohodit...
Kód:
 
      }
    </script>

       <?php } ?>

29.05.2018 10:33

(6 hodnocení)

3

29.05.2018 10:33

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);
});

29.05.2018 11:05

(33 hodnocení)

4

29.05.2018 11:05

tady je to funkcni... https://developers.google.com/maps/d...owindow-simple
+ tohle https://developers.google.com/maps/d...es/icon-simple
a musi to fungovat

29.05.2018 11:07

(6 hodnocení)

5

29.05.2018 11:07

Původně odeslal Shopines ↪

tady je to funkcni... https://developers.google.com/maps/d...owindow-simple

Jo to jsem viděl, ale já mám custom marker.... ne marker...

29.05.2018 11:12

(33 hodnocení)

6

29.05.2018 11:12

Původně odeslal PetrGargulák ↪

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

29.05.2018 11:16

(6 hodnocení)

7

29.05.2018 11:16

Původně odeslal Shopines ↪

doplnil jsem to https://developers.google.com/maps/d...es/icon-simple

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 ----------

Původně odeslal Shopines ↪

doplnil jsem to https://developers.google.com/maps/d...es/icon-simple

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/<

29.05.2018 11:47

(33 hodnocení)

8

29.05.2018 11:47

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 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 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>

29.05.2018 11:51

(6 hodnocení)

9

29.05.2018 11:51

Původně odeslal Shopines ↪

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

Hezký, ale nedám tam box shadow, zaoblený rohy 50 % a border.

29.05.2018 12:15

(33 hodnocení)

10

29.05.2018 12:15

ze by :) https://michal.sixta.cz/tmp/map/map.php

29.05.2018 12:16

(6 hodnocení)

11

29.05.2018 12:16

Původně odeslal Shopines ↪

ze by :) https://michal.sixta.cz/tmp/map/map.php

:)) Ty si fakt šikovnej... poslal jsem ti mejla koukni na to.

29.05.2018 12:27

(33 hodnocení)

12

29.05.2018 12:27

nic neprislo :)

29.05.2018 12:30

(6 hodnocení)

13

29.05.2018 12:30

Původně odeslal Shopines ↪

nic neprislo :)

Tak mi pošli email... já jsem to psal na ten co máš v infu... michal@sixta.cz

29.05.2018 12:33

(33 hodnocení)

14

29.05.2018 12:33

Původně odeslal PetrGargulák ↪

Tak mi pošli email... já jsem to psal na ten co máš v infu... michal@sixta.cz

ten je spravny

29.05.2018 12:35

(6 hodnocení)

15

29.05.2018 12:35

Původně odeslal Shopines ↪

ten je spravny

Tak zkus poslat email mě... gargulakpetr@seznam.cz

Web	petrgargulak.cz
Příspěvky	493
Členem od	26.01.2017

Příspěvky	253
Členem od	21.06.2016

Web	petrgargulak.cz
Příspěvky	493
Členem od	26.01.2017

Příspěvky	253
Členem od	21.06.2016

Web	petrgargulak.cz
Příspěvky	493
Členem od	26.01.2017