logo
Tento obchod už skončil.
Na aktuální inzeráty se podívejte do sekce: Poptávky vývoje a programování

Wordpress acf field a google map

hourglass
Skončil
13.06.2018 v 09:05
biders
100% odezva
1 zájemce
Prodejce
A
Ahoj všem,

poptávám pomoc s google mapou za úplatu.

Potřebuji, aby se mi vypisovali všechny markery z první fotky z galerie...pak potřebuji přes javascript vložit napravo od markeru na mapě div s počtem bytů....

Pole na to mám připravené..zatím jsem vytvořil něco takového, ale háže mi to chybu.

Kód:
<?php
function marker(){
$args = array(
            \'post_type\' => \'nase_nemovitosti\',
            \'posts_per_page\' => -1
        );
        $image = new WP_Query($args);
        if($image->have_posts()): 
            while($image->have_posts()) : $image->the_post();
          
        $images = get_field(\'galerie_nemovitosti\'); 
        $image_1 = $images[0];
        
    ?>
    
   <?php echo $image_1[url]; ?>
           
    
    <?php endwhile; ?>

<?php endif; ?>

<?php }; ?>

 <?php 
   $api_key = \'\';
    
    $location =  get_field(\'google_mapa\', \'option\');
    $zoom = get_field(\'zoom_mapy\', \'option\');
    if ( $api_key && $location[\'lat\'] && $location[\'lng\'] ) {
	

	
	?>
 
 
 
 
 <style>
div#map {width: 100%; height: 635px;}


div#map img[src="<?php marker();?>"]{
        border-radius:29px!important;
		width: 54px!important;
		top: 5px!important;left:5px!important;
		height:54px!important;background:#fff!important;
		border: 2px solid #fff!important;
		box-shadow: 0 0 5px rgba(0,0,0,0.5)!important;
}

</style>


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

    
    	
      

    
      
 <?php  
 function yourplace(){
    
        $args = array(
            \'post_type\' => \'nase_nemovitosti\',
            \'posts_per_page\' => -1
        );
        $locations = new WP_Query($args);
        if($locations->have_posts()): 
            while($locations->have_posts()) : $locations->the_post();
            $loc = get_field(\'mapa_nemovitosti\');
    ?>
    
     <?php echo $loc[\'lat\']; ?><?php echo $loc[\'lng\']; ?>

    
    <?php endwhile; ?>

<?php endif; ?>

<?php };?>   
       
 <script>
 
 
function initMap() {   
       var map = new google.maps.Map(document.getElementById(\'map\'), {
          zoom: <?php echo $zoom; ?>,
          center:new google.maps.LatLng(\'<?php echo $location[\'lat\']; ?>\',\'<?php echo $location[\'lng\']; ?>\'),
          scrollwheel: false,
          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 = <?php marker();?>,
        var beachMarker = new google.maps.Marker({
          position:<?php yourplace();?>,
          map: map,
		  shape:{coords:[34,34,34],
		  type:\'circle\'},
            icon:{url:image,size:new google.maps.Size(68,68)},
			optimized:false
        });

        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 }; ?>
    
    <?php 
    echo \'<script src="https://maps.googleapis.com/maps/api/js?key=\' . $api_key . \'&callback=initMap" async defer></script>\';
   
?>
Přidávám ještě chyby, které to tam háže:

Kód:
SyntaxError: unexpected token: \':\'[Zjistit více]
domia.tode.cz:1104:7
uncaught exception: InvalidValueError: initMap is not a function
Chyba zdrojové mapy: request failed with status 404
URL adresa zdroje: http://domia.tode.cz/wp-content/themes/understrap/js/popper.min.js?ver=0.8.2
URL adresa zdrojové mapy: popper.min.js.map[Zjistit více]
perf_trace {"name": "e2e", "parent": "PageEvents.BIGPIPE_ONLOAD"}
GeX2mrlU3pw.js:143:2734
perf_trace {"name": "e2e", "parent": "PageEvents.BIGPIPE_ONLOAD"}
Je to tady na té stránce dole....

http://domia.tode.cz

Musel jsem tam dát under construction.... více info pak zašlu emailem, až se s někým domluvím. Moc děkuji.

Login:

Navstevnik

heslo:
heslo77

Pouštím tam cyklus while funkcí, vypisuji souřadnice a to samé dělám u obrázků vypisuji z cyklu url....obrázku. Ale ta proměnná v té url javascriptu co má za úkol jeden z těch cyklů var něco,( je to v tom kodu)...tak ta se tam vypisuje jako ten cyklus...tak jak tam dát, aby to dělalo cyklus i na tu proměnnou vypsat taky v cyklu a v jakém for ? Mebo pole ?

Tady jsou použity ty funkce cyklů.
Kód:
    var image = <?php marker();?>,
    var beachMarker = new google.maps.Marker({
    position:<?php yourplace();?>,
Tady je zajímavý článek:

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - Stack…