logo
29.05.2018 10:05
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>';
   
?>

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

29.05.2018 10:28
2
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
3
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
4
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
5
Původně odeslal Shopines
Jo to jsem viděl, ale já mám custom marker.... ne marker...
29.05.2018 11:12
6
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
7
Původně odeslal Shopines
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
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
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>
29.05.2018 11:51
9
Původně odeslal Shopines
Hezký, ale nedám tam box shadow, zaoblený rohy 50 % a border.
29.05.2018 12:15
10
ze by :) https://michal.sixta.cz/tmp/map/map.php
29.05.2018 12:16
11
Původně odeslal Shopines
:)) Ty si fakt šikovnej... poslal jsem ti mejla koukni na to.
29.05.2018 12:27
12
nic neprislo :)
29.05.2018 12:30
13
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
14
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
15
Původně odeslal Shopines
ten je spravny
Tak zkus poslat email mě... gargulakpetr@seznam.cz