Google maps api v3 ссылка удаляет маркер

Question

заранее заблаговременно. Я работал в очень простом коде. Я пытаюсь добавить боковое меню для взаимодействия с google map api v3. Все работает хорошо, но первый добавленный маркер всегда удаляется по клику.

Вот скрипка с моим прогрессом. Пожалуйста, несите меня, я начинаю.

CSS

html,body{ 
    height:100%; 
} 

#map-control{ 
    width:25%; 
    height:100%; 
    float:left; 
} 

#map-canvas{ 
    width:75%; 
    height:100%; 
    display:in-line; 
    float:left; 
} 

#map-control > li{ 
    cursor:pointer; 

} 

HTML

<div id="map-control"> 
<li> 
    <div id='marker_tittle'>ROSARITO1</div> 
    <div>Content address</div><input type="hidden" value="0" /> 
</li> 
<li> 
    <div id='marker_tittle'>ROSARITO2</div> 
    <div>Content address</div><input type="hidden" value="1" /> 
</li> 
</div> 

Jquery

function initialize(lanx,lany,city,zoom){ 

var rosarito1 = "content1"; 
var rosarito2 = "content2"; 
var locations = [ 
     [rosarito1, 32.365812, -117.053999, 2], 
     [rosarito2, 32.350816, -117.059851, 1] 
    ]; 

var myLatlng = new google.maps.LatLng(lanx,lany); 
var map = new google.maps.Map(document.getElementById('map-canvas'),  { 
zoom: zoom, 
center: myLatlng, 
scrollwheel: false, 
disableDefaultUI: true, 
zoomControl: true, 
zoomControlOptions: { 
style: google.maps.ZoomControlStyle.SMALL, 
position: google.maps.ControlPosition.LEFT_BOTTOM 
}, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

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]), 
map: map 
}); 

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

var select_city = $("#map-control > li"); 
select_city.mouseenter(function(){ 
$(this).css({"background": "#d4cfbf"}); 
}); 
select_city.mouseleave(function(){ 
$(this).css({"background": "none"}); 
}); 

select_city.unbind("click").click(function(){ 
var value_branch = $(this).find("input").val(); 
var address_branch = locations[value_branch][0]; 
var lanx_branch = locations[value_branch][1]; 
var lany_branch = locations[value_branch][2]; 
marker.setPosition(new google.maps.LatLng(lanx_branch, lany_branch)); 
infowindow.setContent(address_branch); 
infowindow.open(map, marker); 
}); 

} 

} 

initialize(32.361672,-117.056201,'rosarito',10); 

https://jsfiddle.net/cp4sws21/4/

Answer 1

Вы только час пр ссылки на один маркер и вы двигаетесь, что маркер с этим кодом:

select_city.unbind("click").click(function() { 
    var value_branch = $(this).find("input").val(); 
    var address_branch = locations[value_branch][0]; 
    var lanx_branch = locations[value_branch][1]; 
    var lany_branch = locations[value_branch][2]; 
    marker.setPosition(new google.maps.LatLng(lanx_branch, lany_branch)); 
    infowindow.setContent(address_branch); 
    infowindow.open(map, marker); 
}); 

Решения сохранить массив маркеров, использовать этот массив для доступа маркера.

обновленный код:

select_city.unbind("click").click(function() { 
    var value_branch = $(this).find("input").val(); 
    var address_branch = locations[value_branch][0]; 
    google.maps.event.trigger(markers[value_branch]); 
    infowindow.setContent(address_branch); 
    infowindow.open(map, markers[value_branch]); 
}); 

updated fiddle

фрагмент кода:

function initialize(lanx, lany, city, zoom) { 
 
    var rosarito1 = "content1"; 
 
    var rosarito2 = "content2"; 
 
    var locations = [ 
 
    [rosarito1, 32.365812, -117.053999, 2], 
 
    [rosarito2, 32.350816, -117.059851, 1] 
 
    ]; 
 

 
    var myLatlng = new google.maps.LatLng(lanx, lany); 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: zoom, 
 
    center: myLatlng, 
 
    scrollwheel: false, 
 
    disableDefaultUI: true, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL, 
 
     position: google.maps.ControlPosition.LEFT_BOTTOM 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var markers = []; 
 
    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]), 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    markers.push(marker); 
 
    var select_city = $("#map-control > li"); 
 
    select_city.mouseenter(function() { 
 
     $(this).css({ 
 
     "background": "#d4cfbf" 
 
     }); 
 
    }); 
 
    select_city.mouseleave(function() { 
 
     $(this).css({ 
 
     "background": "none" 
 
     }); 
 
    }); 
 

 
    select_city.unbind("click").click(function() { 
 
     var value_branch = $(this).find("input").val(); 
 
     var address_branch = locations[value_branch][0]; 
 
     google.maps.event.trigger(markers[value_branch]); 
 

 
     infowindow.setContent(address_branch); 
 
     infowindow.open(map, markers[value_branch]); 
 
    }); 
 

 
    } 
 

 
} 
 

 
initialize(32.361672, -117.056201, 'rosarito', 10);

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-control { 
 
    width: 25%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
#map-canvas { 
 
    width: 75%; 
 
    height: 100%; 
 
    display: in-line; 
 
    float: left; 
 
} 
 
#map-control > li { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-control"> 
 
    <li> 
 
    <div id='marker_tittle'>ROSARITO1</div> 
 
    <div>Content address</div> 
 
    <input type="hidden" value="0" /> 
 
    </li> 
 
    <li> 
 
    <div id='marker_tittle'>ROSARITO2</div> 
 
    <div>Content address</div> 
 
    <input type="hidden" value="1" /> 
 
    </li> 
 
</div> 
 
<div id="map-canvas"></div>