Создать карту google с боковой панелью

-1

Итак, я пытаюсь изменить создавшуюся карту. Я бы хотел добавить боковую панель, и я хочу, чтобы она сосредоточилась на щелчке. Как это ->http://marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html Создать карту google с боковой панелью

Вот мой код до сих пор

<html> 
 

 
    <head> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0 
 
     } 
 
    </style> 
 
    
 
    <script src="https://maps.googleapis.com/maps/api/js?KEY=AIzaSyCo0yGy0Qk9b1x4pFDnk_rMQibhBroLW8M"></script> 
 
    <script> 
 

 
    function initialize() { 
 

 
    var locations = [ 
 
     ['<b><a href="#RSVP"><span style="font-size: large;">RSVP</span></a></b>', 6.428073, 3.421507, 1], 
 
     ['<b><a href="#Izanagi"><span style="font-size: large;">Izanagi</span></a></b>', 6.426412, 3.414347, 2], 
 
     ['<b><a href="#Bistro7"><span style="font-size: large;">Bistro 7</span></a></b>', 6.433162, 3.423306, 3], 
 
     ['<b><a href="#SpiceRoute"><span style="font-size: large;">Spice Route</span></a></b>', 6.429500, 3.420479, 4], 
 
     ['<b><a href="#355"><span style="font-size: large;">355</span></a></b>', 6.428518, 3.428305, 5] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
     disableDefaultUI: true, 
 
     scrollwheel: false, 
 
     draggable: true, 
 
     zoom: 14, 
 
     center: new google.maps.LatLng(6.456528,3.408272), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    
 
    var iconBase = 'http://maps.google.com/mapfiles/kml/pal2/'; 
 

 
    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]), 
 
     map: map, 
 
     icon: iconBase + 'icon44.png' 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][0]); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 
    } 
 
    google.maps.event.addDomListener(window, 'load', initialize); 
 

 

 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <div id="map-canvas"></div> 
 
    </body> 
 

 
</html>

EDIT: Я сделал что-то (код вставили), и я хочу, чтобы преобразовать его в другой (ссылка вставили). Я прошу указать, как это сделать.

источник

2015-04-07 Nosaaaa

В чем проблема? Я не вижу никакой боковой панели или не пытаюсь использовать ее в своем коде. [пример карты с боковой панелью] (http://www.geocodezip.com/v3_MW_example_map2.html) – geocodezip

Я не сделал попытку, потому что я не знаю, как это сделать. Я сделал что-то (вставил код), и я хочу преобразовать его в другой (ссылка вставлена). Я прошу указать, как это сделать. Это проблема. – Nosaaaa

В примере, что вы связаны, таким образом, что карта перемещается по щелчку делается здесь (комментарии мои):

// looping through each marker, creating a li 
$(markers).each(function(i,marker){ 
$("<li />") 
    .html("Point "+i) 
// calling the displayPoint() function on click 
    .click(function(){ 
     displayPoint(marker, i); 
    }) 
    .appendTo("#list"); 

GEvent.addListener(marker, "click", function(){ 
    displayPoint(marker, i); 
}); 
}); 

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

...

// the displayPoint() function calls map.panTo, which will pan to the marker 
map.panTo(marker.getLatLng());

Here is a jsfiddle, который использует ваш код с некоторыми обновлениями с сайта, который вы связали

источник

2015-04-07 22:07:27

большое спасибо – Nosaaaa

приветствуются. Если ответ был полезен для вас, тогда не стесняйтесь повышать и отмечать его как ваш ответ =) –

Быстрая вещь: есть ли способ редактировать объекты пули по умолчанию на боковой панели? – Nosaaaa

Создать карту google с боковой панелью

ответ

Смежные вопросы