0

I've been playing around with the Google Maps API lately, and I have links that perform a JS function. This JS function partially works, on click it centers the map to the pin coords, but I also want it to show the infowindow; Everything works except opening the infowindow. Any help would be amazing! the code is a little cluttered with PHP / WP functions.

    <script type="text/javascript">

    var map;
    var infowindow;
    var marker;

    function initialize() {
        var styles = [
            {
                stylers: [
                    { hue: "#c09c3d" },
                ]
            },{
                featureType: "road",
                elementType: "geometry",
                stylers: [
                    { lightness: 50 },
                    { visibility: "simplified" }
                ]
            }
         ];

         infowindow = new google.maps.InfoWindow({
             maxWidth: 275
         });

        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(<?php echo $centerCoords; ?>),
            styles: styles,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

        var image = '<?php echo get_template_directory_uri(); ?>/images/icon_marker.png';

        var locations = [
             <?php
                // LOOP ARGUMENTS
                $args = array( 'post_type' => 'cbd_dealers', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC' ); // -1 Shows ALL Posts
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();

                // CUSTOM CONTENT
                $dealerStreetAddress = get_post_meta($post->ID,"dealerStreetAddress",true);
                $dealerCity = get_post_meta($post->ID,"dealerCity",true);
                $dealerState = get_post_meta($post->ID,"dealerState",true);
                $dealerZipCode = get_post_meta($post->ID,"dealerZipCode",true);
                $dealerCoords = get_post_meta($post->ID,"dealerCoords",true);
                $dealerPhoneNumber = get_post_meta($post->ID,"dealerPhoneNumber",true);
                $dealerLink = get_post_meta($post->ID,"dealerLink",true);
            ?>

            {
                latlng : new google.maps.LatLng<?php echo $dealerCoords; ?>,

                info: '<style>a{color:#000000 !important;}a:hover{color:#DCB54F !important;}</style><strong style="line-height:25px;display:block;width:230px;"><?php the_title();  ?></strong><?php echo $dealerStreetAddress; ?><br /><?php echo $dealerCity; ?>, <?php echo $dealerState; ?>&nbsp;<?php echo $dealerZipCode; ?><br /><?php echo $dealerPhoneNumber; ?><br /><a href="<?php echo $dealerLink; ?>" style="line-height:25px;display:block;width:230px;" target="_blank">View Website</a>'
            },

          <?php /* END WHILE AND RESET QUERY */ endwhile; wp_reset_query(); ?>

              ];

            for (var i = 0; i < locations.length; i++) {  
                marker = new google.maps.Marker({
                    position: locations[i].latlng,
                    icon: image,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {   
                  return function() {

                    infowindow.setContent(locations[i].info);
                    infowindow.open(map, marker);
                  }
                })(marker, i));
            }

    }
    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
        document.body.appendChild(script);
        }
     function set_map_center(lat, lng) {

              var myLatLng = new google.maps.LatLng(lat, lng);
              infowindow.open(map,marker);

              map.setCenter(myLatLng);
              map.setZoom(12);
              infowindow.open(map, marker);
        }

    window.onload = loadScript;
</script>
4

1 回答 1

2

感谢Suvi的评论，我明白了。

首先，您需要在创建它们时将所有标记存储在一个数组中。然后在您的 set_map_center 函数中，您可以扫描标记以找到匹配的 Lat/Lng，然后触发该标记的单击事件。

要触发标记点击事件：

google.maps.event.trigger(markers[i], 'click');

这是我检查纬度/经度匹配的方法

function set_map_center(lat, lng){
    var pos = new google.maps.LatLng(lat, lng)
    for(var i=0;i<markers.length;i++){
        if(markers[i].position.equals(pos))
            google.maps.event.trigger(markers[i], 'click');

    }
}

JSFiddle 示例

于 2013-10-10T20:49:57.363 回答