Google map listing ähnlich wie Airbnb

Question

Ich hoffe, dass jemand mir freundlicherweise helfen kann. Ich habe nicht das ausreichende Wissen von Google API und Jquery, um zu implementieren, was ich brauche.

ich eine Google-Karte haben, können Sie eine Demo sehen hier http://divinethemes.eu/map/ das Skript arbeitet mit infobox, wobei jeder Punkt durch eine Kategorie gefiltert, usw.

Was ich brauche, ist die Möglichkeit zu haben, einige Aktionen zu geben aus einer externen Kartenliste (aus dem HTML): öffne die Blase eines bestimmten Punktes (und schließe bereits geöffnet + zentriere die Karte) oder hüpfe eine Blase oder markiere einen bestimmten Marker. Meine Absicht ist es, eine ähnliche (einfachere) Google Map Location Liste wie Airbnb zu erstellen. kann toll sein, wenn in der HTML-Auflistung außerhalb der Karte jeder Punkt ein href sein kann, der die spezifische Blase via und ID oder Datenattribut öffnet ... wie "name_point". aber ich weiß nicht, wie es zu tun ...

Hier ist der Code der Karte:

(function(A) { 

    if (!Array.prototype.forEach) 
     A.forEach = A.forEach || function(action, that) { 
       for (var i = 0, l = this.length; i < l; i++) 
        if (i in this) 
         action.call(that, this[i], i, this); 
      }; 

})(Array.prototype); 

var 
    mapObject, 
    markers = [], 
    markersData = { 
     'Bars': [ 
      { 
       type_point: 'Wine bar', 
       location_latitude: 43.773781, 
       location_longitude: 11.257206, 
       map_image_url: 'img/thumb_map_2.jpg', 
       rate: 'Superb 7.5', 
       name_point: 'Astor Cafe', 
       description_point: 'Piazza del Duomo, 20/R', 
       get_directions_start_address: '43.773460, 11.255985', 
       phone: '+3934245255', 
       url_detail: 'single_tour.html' 
      }, 
      { 
       type_point: 'Pub - Wine bar', 
       location_latitude: 43.772238, 
       location_longitude: 11.252205, 
       map_image_url: 'img/thumb_map_3.jpg', 
       rate: 'Superb 7.5', 
       name_point: 'Uncle Jimmy', 
       description_point: 'Via dei Pescioni,10', 
       get_directions_start_address: '43.773460, 11.255985', 
       phone: '+3934245255', 
       url_detail: 'single_tour.html' 
      } 
     ] 

    }; 


var mapOptions = { 
    zoom: 16, 
    center: new google.maps.LatLng(43.773460, 11.255985), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 

    mapTypeControl: false, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     position: google.maps.ControlPosition.LEFT_CENTER 
    }, 
    panControl: false, 
    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_RIGHT 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.TOP_RIGHT 
    }, 
    scrollwheel: false, 
    scaleControl: false, 
    scaleControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 
    streetViewControl: true, 
    streetViewControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
    }, 

}; 

var marker; 
mapObject = new google.maps.Map(document.getElementById('map'), mapOptions); 
for (var key in markersData) 
    markersData[key].forEach(function (item) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(item.location_latitude, item.location_longitude), 
      map: mapObject, 
      icon: 'img/pins/' + key + '.png', 
     }); 

     if ('undefined' === typeof markers[key]) 
      markers[key] = []; 
     markers[key].push(marker); 
     google.maps.event.addListener(marker, 'click', (function() { 
      closeInfoBox(); 
      getInfoBox(item).open(mapObject, this); 
      mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude)); 
     })); 

    }); 

function hideAllMarkers() { 
    for (var key in markers) 
     markers[key].forEach(function (marker) { 
      marker.setMap(null); 
     }); 
}; 

function closeInfoBox() { 
    $('div.infoBox').remove(); 
}; 

function getInfoBox(item) { 
    return new InfoBox({ 
     content: 
     '<div class="marker_info" id="marker_info">' + 
     '<img src="' + item.map_image_url + '" alt=""/>' + 
     '<span>'+ 
     '<span class="infobox_rate">'+ item.rate +'</span>' + 
     '<h3>'+ item.name_point +'</h3>' + 
     '<em>'+ item.type_point +'</em>' + 
     '<strong>'+ item.description_point +'</strong>' + 
     '<a href="'+ item.url_detail + '" class="btn_infobox_detail"></a>' + 
     '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>' + 
     '<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' + 
     '</span>' + 
     '</div>', 
     disableAutoPan: true, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(35, -175), 
     closeBoxMargin: '5px -28px 0 0', 
     closeBoxURL: "img/close_infobox.png", 
     isHidden: false, 
     pane: 'floatPane', 
     enableEventPropagation: true 
    }); 
}; 

Answer 1

Es scheint, Sie halten Referenz aller Ihrer Marker in markers Array. Sie können das Ereignis click auf einem beliebigen Marker auslösen, um einen Klick darauf zu simulieren. Auf diese Weise würde sich die Infobox für Marker öffnen und die Karte würde dort zentriert sein.

So erstellen Sie eine Funktion wie:

function onHtmlClick(key){ 
    google.maps.event.trigger(markers[key], "click"); 
} 

wo key der Index des Markers ist für Sie in der markers Array bringen Popup wollen.

auf Ihre HTML-Elemente würden Sie rufen Sie einfach die Funktion, so etwas wie:

<div onclick="onHtmlClick(1)">...</div> 

EDIT!

Es ist wie in Ihrem Code aussieht, hat die markers Array-Struktur folgende:

[ LOCATION_TYPE_1: [ MARKER, MARKER,..], LOCATION_TYPE_2: [ MARKER4, MARKER,..] 

Das bedeutet, dass Sie die onclick Zuhörer und Funktion aktualisieren:

<div onclick="onHtmlClick('Bars', 1)">...</div> 


function onHtmlClick(location_type, key){ 
    google.maps.event.trigger(markers[location_type][key], "click"); 
} 

Arbeits Geige: https://jsfiddle.net/mow89utv/2/