Я использую API-интерфейс Google maps javascript для создания карты с указанием местоположений для нескольких типов сообщений. Я могу создать пользовательский значок маркера карты, но не могу понять, как отображать другой значок маркера для каждого из разных типов сообщений.
До сих пор я так:
var image = '<?php $the_post_type = get_post_type( get_the_ID() ); if ($the_post_type == 'surf-school') { echo home_url().'/wp-content/themes/blutek/images/surf-school-marker.png'; } else if ($the_post_type == 'surfing-beach') { echo home_url().'/wp-content/themes/blutek/images/beach-marker.png'; } ?>';
В приведенном выше коде отображается карта со всеми сообщениями, имеющими один и тот же значок (beach-marker.png). Может ли кто-нибудь увидеть, где я ошибаюсь?
В соответствии с запросом, вот полная JS, которая создает карту:
<script type="text/javascript"> var locations = [ <?php $post_query = new WP_Query(array('posts_per_page' => 999, 'post_type' => array ('surfing-beach','surf-school'))); if(!empty($post_query->posts)){ foreach($post_query->posts as $post) { $location_lat = get_post_meta($post->ID,'wp_gp_latitude',true); $location_long = get_post_meta($post->ID,'wp_gp_longitude',true); ?> ['<a href="<?php the_permalink();?>"><?php the_title(); ?></a>', <?php echo $location_lat; ?>, <?php echo $location_long; ?>, 1], <?php } }?> ]; var map = new google.maps.Map(document.getElementById('country-map-banner'), { zoom: 8, center: new google.maps.LatLng(51.155145, -1.257973), mapTypeId: google.maps.MapTypeId.ROADMAP }); var image = '<?php $the_post_type = get_post_type( get_the_ID() ); if ($the_post_type == 'surf-school') { echo home_url().'/wp-content/themes/blutek/images/surf-school-marker.png'; } else if ($the_post_type == 'surfing-beach') { echo home_url().'/wp-content/themes/blutek/images/beach-marker.png'; } ?>'; var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), icon: image, map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } map.set('styles', [ {"featureType": "landscape", "elementType": "geometry.fill", "stylers": [ { "color": "#e5e3ef" }, { "lightness": 15 } ] }, {"featureType": "all", "stylers": [ {"saturation": 0}, {"hue": "#e7ecf0"} ] }, {"featureType": "road", "stylers": [ {"visibility": "simplified"}, {"saturation": -70} ] }, {"featureType": "transit", "stylers": [ {"visibility": "off"} ] }, {"featureType": "poi", "stylers": [ {"visibility": "off"} ] }, {"featureType": "water", "stylers": [ { "visibility": "simplified"}, {"color": "#94d4fc"} ] }, {"elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" } ] }, {"featureType": "road.highway", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] } ]); </script>