구글 맵 // "잡히지 않은 타입 오류 : 정의되지 않은 속성 '아이콘'을 읽을 수 없습니다.

Question

사용자가 고급 사용자 정의 필드를 사용하여지도에 위치를 추가 할 수있는 Wordpress 웹 사이트에 Google지도를 구현하고 있습니다. 지도가 잘로드되지만 아이콘/마커가 오른쪽에로드되지 않는 것 같습니다. Uncaught TypeError : Chrome 개발자 도구 검사기에서 '정의되지 않은 속성'아이콘을 읽을 수 없습니다. '라는 오류가 발생합니다.

아무 것도 추가해야하나요? 저는 Google Maps를 처음 사용하고있어 불만을 제기합니다.

<?php // Index template 
get_header(); ?> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<div class="twelve column"> 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

      <div class="intro"> 
       <?php the_excerpt(); ?> 
       <hr> 
      </div> 

       <?php the_content(); ?> 

       <header class="clearfix"></header> 
         <div id="mapcanvas"></div> 
           <?php 
           // For creating multiple, customized loops. 
           // http://codex.wordpress.org/Class_Reference/WP_Query 
           $custom_query = new WP_Query('post_type=locations'); // exclude category 9 
           while($custom_query->have_posts()) : $custom_query->the_post(); ?> 
            <?php if(get_field('link')): ?> 
             <div> 
             <?php while(has_sub_field('link')): ?> 
              <div> 
               <p><?php the_sub_field('url'); ?></p> 
              </div> 
             <?php endwhile; ?> 
             </div> 
            <?php endif; ?> 
           <?php endwhile; ?> 
           <?php wp_reset_postdata(); // reset the query ?> 

           <?php 
           function get_single_term($post_id, $taxonomy) 
           { 
            $terms = wp_get_object_terms($post_id, $taxonomy); 
            if(!is_wp_error($terms)) { 
            return '<a href="'.get_term_link($terms[0]->slug, $taxonomy).'">'.$terms[0]->name.'</a>'; 
            } 
           } 

           $i = 0; 

           // For creating multiple, customized loops. 
           // http://codex.wordpress.org/Class_Reference/WP_Query 
            $custom_query = new WP_Query('post_type=location&posts_per_page=-1'); 
            while($custom_query->have_posts()) : $custom_query->the_post(); 

             $title = get_the_title(); // Location title 
             $map = get_field('location'); // ACF location contains address and coordinates 
             $terms = strip_tags(get_the_term_list($post->ID, 'distributors', '', ' & ')); // Get distributor terms and rm links 
             $info = '<strong>' . $terms . '</strong><br>' . $title; // Info window content 
             $url = the_sub_field('url'); 
             if(get_field('link')){ 
             echo '<ul>'; 
             while(has_sub_field('link')){ 
              $info .= '<li><a href="http://'.get_sub_field('url').'">'.get_sub_field('url').'</a></li>'; 
             } 
             echo '</ul>'; 
             } 
             $location[$i][0] = $title; // Store the post title 
             $location[$i][1] = $map['coordinates']; // Store the ACF coordinates 
             $location[$i][2] = json_encode($info); // Store info window content 
             $location[$i][3] = strip_tags(get_single_term($post->ID, 'distributor')); // Get first term for marker icon 

             $i ++; 
            endwhile; ?> 
            <?php wp_reset_postdata(); // reset the query ?> 

           <script> 
           $(function initialize() { 

            // Center map on our main location 
            var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002); 

            var map; 
            var bounds = new google.maps.LatLngBounds(); 

            // https://developers.google.com/maps/documentation/javascript/styling 
            // Create an array of styles. 
            var styles = [ 
            { 
             stylers: [ 
             { saturation: -99.9 } 
             ] 
            } 
            ]; 

            // Create a new StyledMapType object, passing it the array of styles, 
            // as well as the name to be displayed on the map type control. 
            var styledMap = new google.maps.StyledMapType(styles, {name: 'exile'}); 

            // Create a map object, and include the MapTypeId to add 
            // to the map type control. 
            var mapOptions = { 
            mapTypeId: 'roadmap', 
            center: myLatLng, 
            zoom: 8, 
            disableDefaultUI: false, 
            scrollwheel: true, 
            draggable: true 
            }; 
            // Display a map on the page 
            map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions); 
            map.setTilt(45); 

            //Associate the styled map with the MapTypeId and set it to display. 
            map.mapTypes.set('exile', styledMap); 
            map.setMapTypeId('exile');         

           // Marker icons 
            typeObject = { 
            "Home" : { 
             "icon" : new google.maps.MarkerImage('img/target.png', new google.maps.Size(28,28), new google.maps.Point(0,0), new google.maps.Point(36,14)), 
             "shadow" : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', new google.maps.Size(40,34)) 
            }, 
            "Others" : { 
             "icon" : new google.maps.MarkerImage('img/beer-mug.png', new google.maps.Size(18,26), new google.maps.Point(0,0), new google.maps.Point(9,26)), 
             "shadow" : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', new google.maps.Size(40,34)) 
            } 
            } 

            // http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ 
            // Multiple Markers 
            var markers = [ 
            ["Exile Brewing Co", 41.583013,-93.63701500000002,"Others"], 
            <?php 
            if (count($location)>0) { 
             foreach ($location as $key => $value){ 
             if ($key < (count($location)-1)){ 
              echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"], ' . "\n"; 
             } else { 
              echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"]'; 
             } 
             } 
            } 
            ?> 
            ]; 

            // Info Window Content 
            var infoWindowContent = [ 
            ["<strong>Exile Brewing Co.</strong><br>1514 Walnut Street, Des Moines"], 
            <?php 
            if (count($location)>0) { 
             foreach ($location as $key => $value){ 
             if ($key < (count($location)-1)) { 
              echo '[' . $location[$key][2] . '], ' . "\n"; 
             } else { 
              echo '[' . $location[$key][2] . ']'; 
             } 
             } 
            } 
            ?> 
            ]; 

            // Display multiple markers on a map 
            var infoWindow = new google.maps.InfoWindow(), marker, i; 

            // Loop through our array of markers & place each one on the map 
            for(i = 0; i < markers.length; i++) { 
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]); // ACF coordinates 
            var icon = typeObject[markers[i][3]]['icon']; 
            var shadow = typeObject[markers[i][3]]['shadow']; 
            bounds.extend(position); 
            marker = new google.maps.Marker({ 
             position: position, 
             map: map, 
             title: markers[i][0], 
             icon: icon, 
             shadow: shadow 
            }); 

            // Allow each marker to have an info window 
            google.maps.event.addListener(marker, 'click', (function(marker, i) { 
             return function() { 
             infoWindow.setContent(infoWindowContent[i][0]); 
             infoWindow.open(map, marker); 
             } 
            })(marker, i)); 

            // Automatically center the map fitting all markers on the screen 
            //map.fitBounds(bounds); 
            } 

            // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
            this.setZoom(15); 
            google.maps.event.removeListener(boundsListener); 
            }); 

           }); 
           </script> 
           <div id="panel"> 
           Search within 
           <input id="address" type="textbox" value="10"> 
           miles of zipcode 
           <input id="address" type="textbox" value="50266"> 
           <input class = "button" type="button" value="Find it!" onclick="codeAddress()"> 
          </div> 

       <footer class="clearfix"></footer> 
    <?php endwhile;?> 
    <?php endif; ?> 
    </div> 
</div> 

<?php get_footer(); ?> 

여기 내가 너무 일하고 있어요 페이지에 대한 링크입니다 : 여기에 내가 사용하고 무엇 http://exilebrewing.com/locations/

어떤 도움 감사합니다, 감사합니다!

Answer 1

typeObject는 2 곳 (Home 및 Others)

markers에있는 항목의 4 항목이 재산-이름의 1 일치하지 않을 때 스크립트가 실패합니다 포함되어 있습니다.

이 현재 발생 :

var markers = [ 
["Exile Brewing Co", 41.583013,-93.63701500000002,"Others"], 
["Exile Brewing Co",41.583013,-93.63701500000002,""] 
//this must be either Home or Others--------------^        
]; 

당신은 markers을 수정하거나 대체를 사용할 수 있습니다 중 하나 속성을 찾을 수 없을 때 : 당신의 응답을

for(i = 0; i < markers.length; i++) { 
var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 

//use typeObject.Others when property can't be found 
var icon = (typeObject[markers[i][3]]||typeObject.Others).icon; 
var shadow = (typeObject[markers[i][3]]||typeObject.Others).shadow; 

//continue with your code 
}