Google map popover

Petr Gargulák

(12 hodnocení)

29. 5. 2018 10:05:56

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:

<?php

$api_key = '';
    $marker = get_field('obrazek-byty', $post_id);
    $location =  get_field('mapa_byty');
    $zoom = get_field('zoom');
    if ( $api_key && $location && $location ) { ?>
    <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; ?>, lng: <?php echo $location; ?>};
        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": "labels.icon",
            "stylers": 
          }, {
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "elementType": "labels.text.stroke",
            "stylers": 
          }, {
            "featureType": "administrative.land_parcel",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "poi.park",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "road.arterial",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "road.highway",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "road.local",
            "elementType": "labels.text.fill",
            "stylers": 
          }, {
            "featureType": "transit.line",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "transit.station",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": 
          }, {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": 
          }]
        });

var data =

for(var i=0;i<data.length;i++){
new CustomMarker(new google.maps.LatLng(data<span style="font-style:italic;">.position), map,  data<span style="font-style:italic;">.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 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
        });
        
    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>';
   
?>

29. 5. 2018 10:05:56

https://webtrh.cz/diskuse/google-map-popover/#reply1348702

Shopines

(32 hodnocení)

29. 5. 2018 10:28:31

pokud tahle funkce "function initMap()" ma uzavirat vsechny ostatni... tak ti to koliduje s php... musis to prohodit...

29. 5. 2018 10:28:31

https://webtrh.cz/diskuse/google-map-popover/#reply1348701

Petr Gargulák

(12 hodnocení)

29. 5. 2018 10:33:22

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. 5. 2018 10:33:22

https://webtrh.cz/diskuse/google-map-popover/#reply1348700

Shopines

(32 hodnocení)

29. 5. 2018 11:05:36

tady je to funkcni... https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

+ tohle https://developers.google.com/maps/documentation/javascript/examples/icon-simple

a musi to fungovat

29. 5. 2018 11:05:36

https://webtrh.cz/diskuse/google-map-popover/#reply1348699

Petr Gargulák

(12 hodnocení)

29. 5. 2018 11:07:20

Napsal Shopines;1466112
tady je to funkcni... https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

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

29. 5. 2018 11:07:20

https://webtrh.cz/diskuse/google-map-popover/#reply1348698

Shopines

(32 hodnocení)

29. 5. 2018 11:12:28

Napsal PetrGargulák;1466113
Jo to jsem viděl, ale já mám custom marker.... ne marker...

doplnil jsem to https://developers.google.com/maps/documentation/javascript/examples/icon-simple

29. 5. 2018 11:12:28

https://webtrh.cz/diskuse/google-map-popover/#reply1348697

Petr Gargulák

(12 hodnocení)

29. 5. 2018 11:16:01

Napsal Shopines;1466115
doplnil jsem to https://developers.google.com/maps/documentation/javascript/examples/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 ----------

Napsal Shopines;1466115
doplnil jsem to https://developers.google.com/maps/documentation/javascript/examples/icon-simple

Nebo proč to na kliknutí reaguje tak jak reaguje... ?

ReferenceError: me is not defined

test-bytu2:629:13

initMap/CustomMarker.prototype.draw/<

29. 5. 2018 11:16:01

https://webtrh.cz/diskuse/google-map-popover/#reply1348696

Shopines

(32 hodnocení)

29. 5. 2018 11:47:40

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

Info windows

$api_key = 'AIzaSyBnWhato3p7JhkOjk9f45WdlXYWeMEhYCY';

echo '';

29. 5. 2018 11:47:40

https://webtrh.cz/diskuse/google-map-popover/#reply1348695

Petr Gargulák

(12 hodnocení)

29. 5. 2018 11:51:32

Napsal Shopines;1466130
vysledek -> https://michal.sixta.cz/tmp/map/map.php

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

29. 5. 2018 11:51:32

https://webtrh.cz/diskuse/google-map-popover/#reply1348694

Shopines

(32 hodnocení)

29. 5. 2018 12:15:19

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

29. 5. 2018 12:15:19

https://webtrh.cz/diskuse/google-map-popover/#reply1348693

Petr Gargulák

(12 hodnocení)

29. 5. 2018 12:16:46

Napsal Shopines;1466143
ze by :) https://michal.sixta.cz/tmp/map/map.php

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

29. 5. 2018 12:16:46

https://webtrh.cz/diskuse/google-map-popover/#reply1348692

Shopines

(32 hodnocení)

29. 5. 2018 12:27:59

nic neprislo :)

29. 5. 2018 12:27:59

https://webtrh.cz/diskuse/google-map-popover/#reply1348691

Petr Gargulák

(12 hodnocení)

29. 5. 2018 12:30:04

Napsal Shopines;1466147
nic neprislo :)

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

29. 5. 2018 12:30:04

https://webtrh.cz/diskuse/google-map-popover/#reply1348690

Shopines

(32 hodnocení)

29. 5. 2018 12:33:50

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

ten je spravny

29. 5. 2018 12:33:50

https://webtrh.cz/diskuse/google-map-popover/#reply1348689

Petr Gargulák

(12 hodnocení)

29. 5. 2018 12:35:04

Napsal Shopines;1466150
ten je spravny

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

29. 5. 2018 12:35:04

https://webtrh.cz/diskuse/google-map-popover/#reply1348688

Pro odpověď se přihlašte.

Přihlásit

Prodej Více

vánoční doména e-Darky.cz

2 999 Kč

0 příhozů

Na prodej kompletně připravený erotický e-shop Rozkosarna.cz

30 000 Kč

0 příhozů

Prodej eshopu

1 Kč

0 příhozů

eshop s detskými razítkami na textil DetskeRazitko.sk

500 €

0 příhozů

10 jednoslovných a jasně znějících domén .EU

10 000 Kč

0 příhozů

Poptávky Více

Hledáme vývojáře backendu pro WebGL hru (Unity)

Hledáme správce Instagramu pro keramické studio v Praze

Rád koupím eshop či jiný projekt, který by bylo možné platit na splátky

Poptávka: pracovník – vývojář, celá ČR

Odkoupim výdělečny projekt

Pracovní nabídky Více

Junior Fullstack developer

Práce z domu

Shopify Developer

Práce z domu

Specialista/ka marketingové komunikace – direct marketing

Praha

Angular Developer

Praha

Hledáme 2 zkušené vývojáře

Práce z domu, Praha

Nabídky Více

🍷 Teambuilding v srdci Moravského Toskánska

Vývoj Windows aplikací (C#, .NET, databáze)

Použité vybavení ústředny – Racky (skříně), Ventilace a další

Spolehlivá grafička na volné noze | Logotvorba | Tiskoviny | Branding | Weby a e-shopy

TypeScript/PHP/Rust/C# – Senior full web stack dev