Get value of Select2 for Google Map Api v3 - google-maps-api-3

Question

I recently changed my SELECT menu from the standard format to a Select 2 menu. Since this change my Value"" field seems to not be carrying the value to the map. When I select an item from the list it should trigger it's respective info box on the map to show, but his has stopped working. Any ideas?
Google Map Code Sample:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(42.3443961,-71.0853170);
var settings = {
zoom: 14,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
<!--START Boston Medical Center-->
var contentStringboscen = '<div class="contentmap">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Boston Medical Center</h2>'+
'<div id="bodyContent">'+
'<p>Boston Medical Center (BMC) is a 496-bed academic medical center located in Boston’s historic South End. The hospital is the primary teaching affiliate for Boston University School of Medicine.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringboscen
});
var boscenImage = new google.maps.MarkerImage('images/map-icons/local-attractions/a.png',
new google.maps.Size(40,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var boscenShadow = new google.maps.MarkerImage('images/map-icons/local-attractions/a-shadow.png',
new google.maps.Size(40,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50));
var boscenPos = new google.maps.LatLng(42.3344236,-71.0744651);
var boscenMarker = new google.maps.Marker({
position: boscenPos,
map: map,
icon: boscenImage,
shadow: boscenShadow,
title:"Boston Medical Center",
zIndex: 3});
<!--STOP Boston Medical Center-->
<!--START Boston Public Library-->
var contentStringboslib = '<div class="contentmap">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Boston Public Library</h2>'+
'<div id="bodyContent">'+
'<p>The Boston Public Library (est.1848) is a municipal public library system in Boston, Massachusetts, United States. It was the first publicly supported municipal library in the United States, the first large library open to the public in the United States, and the first public library to allow people to borrow books and other materials and take them home to read and use.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentStringboslib
});
var boslibImage = new google.maps.MarkerImage('images/map-icons/local-attractions/b.png',
new google.maps.Size(40,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var boslibShadow = new google.maps.MarkerImage('images/map-icons/local-attractions/b-shadow.png',
new google.maps.Size(40,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50));
var boslibPos = new google.maps.LatLng(42.349484,-71.077740);
var boslibMarker = new google.maps.Marker({
position: boslibPos,
map: map,
icon: boslibImage,
shadow: boslibShadow,
title:"Boston Public Library",
zIndex: 3});
<!--STOP Boston Public Library-->
google.maps.event.addListener(boscenMarker, 'click', function() {
infowindow.setContent(contentStringboscen);
infowindow.open(map,boscenMarker);
});
google.maps.event.addListener(boslibMarker, 'click', function() {
infowindow.setContent(contentStringboslib);
infowindow.open(map,boslibMarker);
});
var selectChoices = {
boscenChoice: boscenMarker,
boslibChoice: boslibMarker,
};
google.maps.event.addDomListener(
document.getElementById("selectLocation"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
}
</script>
Select2 Code:
<link type="text/css" rel="stylesheet" href="select2/select2.css">
<script src="select2/select2.js"></script>
<script>
var men=jQuery;
men.noConflict();
men(document).ready(function() {
men('#selectLocation').select2(
{
placeholder: "Choose an Attraction",
width:'400px',
formatResult: format,
formatSelection: format,
});
function format(option) {
if (option.id.indexOf('Choice') != -1) {
return "<span style='display:inline-block;width:20px'>" + option.text.substring(0,2) + "</span>" + option.text.substring(2)
} else {
return option.text
}
}
});
</script>
Select2 Menu:
<div class="general-bg" style="background-color:#ffffff; border-bottom:solid 1px #cccccc">
<div id="map-nav" style="width:400px;margin:10px auto 10px auto; background-color:#ffffff;">
<select id="selectLocation" style="color:#09F; font-size:18px; font-family:'Century Gothic W01';" name="categories">
<option></option>
<option value='boscenChoice'>A. Boston Medical Center</option>
<option value='boslibChoice'>B. Boston Public Library</option>
<option value='chrcenChoice'>C. Christian Science Center</option>
<option value='chuapaChoice'>D. Church Park Apartments</option>
<option value='copplaChoice'>E. Copley Place Shopping</option>
<option value='fenparChoice'>F. Fenway Park</option>
<option value='findisChoice'>G. Financial District</option>
<option value='houbluChoice'>H. House of Blues</option>
<option value='huntheChoice'>I. Huntington Theatre</option>
<option value='isamusChoice'>J. Isabella Stewart Gardener Museum</option>
<option value='logairChoice'>K. Logan International Airport</option>
<option value='lonmedChoice'>L. Longwood Medical and Academic Area</option>
<option value='mashosChoice'>M. Massachusetts General Hospital</option>
<option value='mastecChoice'>N. Massachusetts Institute of Technology</option>
<option value='musartChoice'>O. Museum of Fine Arts</option>
<option value='newstrChoice'>P. Newbury Street Shopping</option>
<option value='prucenChoice'>Q. Prudential Center Shopping</option>
<option value='pubgarChoice'>R. Public Garden</option>
<option value='symhalChoice'>S. Symphony Hall</option>
</select>
</div>
</div>

Answer 1

You problem come from Select2 behavior.
When you select a new entry inside Select2 the html attribute on the <option> inside your <select id="selectLocation"> will not be updated as "selected" like a normal select will do. Select2 will in exchange update <span class"select2-selection__rendered"> and trigger 2 event in javascript: change and select2:select
From there we learn that your code need to be updated here:
google.maps.event.addDomListener(
document.getElementById("selectLocation"), 'change',
function() {
google.maps.event.trigger(selectChoices[this.value], "click");
});
Those are the thing to fix
Where you attach the event document.getElementById("selectLocation") will not trigger. You need to attach it to a select2 event as mentioned above or directly on the <span class="select2-selection__rendered">
Where you get the value google.maps.event.trigger(selectChoices[this.value], "click"), since the <option> will not be updated you need to grab the value from the select2 event, select2 instance or directly on the <span class="select2-selection__rendered">
P.S. using the <span class="select2-selection__rendered"> will be a very fast fix to write for your code. Going for select2 event and select2 instance is a better approach but will be longer to apply and require more learning from your part.