API Map - Locations List

<!--API Map - Locations List-->
<div class="locations_tabs_list_wrap">
	<ul class="locations_list">
		<li class="location_item location_tab_item active" data-tab="tab_1" data-location="vin1">Вінниця</li>
		<li class="location_item location_tab_item" data-tab="tab_2" data-location="zm">Жмеринка</li>
		<li class="location_item location_tab_item" data-tab="tab_3" data-location="mp">Могилів-Подільський</li>
	</ul>
</div>

<div class="contacts_map">
	<div id="map"></div>
	<div class="locations">
		<div class="location_content active" id="tab_1">
			<ul class="locations_list">
				<li class="location_item" data-location="vin1">
					<table>
						<tr>
							<td colspan="2">
								<p>пр-т Коцюбинського, 4</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн-суб   9:00-19:00</span></p>
								<p><span>неділя   9:00-18:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0432508511">(0432) 50 - 85 - 11</a></p>
							</td>
						</tr>
					</table>
				</li>
				
				<li class="location_item" data-location="vin2">
					<table>
						<tr>
							<td colspan="2">
								<p>вул. Київська, 2</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн-суб   9:00-19:00</span></p>
								<p><span>неділя   9:00-18:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0432671532">(0432) 67 - 15 - 32</a></p>
							</td>
						</tr>
					</table>
				</li>
				
				<li class="location_item" data-location="vin3">
					<table>
						<tr>
							<td colspan="2">
								<p>вул. 600-річчя, 36</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн-суб  10:00-20:00</span></p>
								<p><span>неділя  10:00-19:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0980424244">(098) 042 - 42 - 44</a></p>
							</td>
						</tr>
					</table>
				</li>
				
				<li class="location_item" data-location="vin4">
					<table>
						<tr>
							<td colspan="2">
								<p>пр-т Коцюбинського, 11А ТЦ  «Алі-Баба» 2-й поверх</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>вт-нед   9:00-19:00</span></p>
								<p><span>пн       9:00-18:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0432671532">(0432) 67 - 15 - 32</a></p>
							</td>
						</tr>
					</table>
				</li>
				
				<li class="location_item" data-location="vin5">
					<table>
						<tr>
							<td colspan="2">
								<p>пр-т Коцюбинського, 78</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн-суб   9:00-20:00</span></p>
								<p><span>нед      9:00-19:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0962895823">(096) 289 - 58 - 23</a></p>
							</td>
						</tr>
					</table>
				</li>
			</ul>
		</div>
		<div class="location_content" id="tab_2">
			<ul class="locations_list">
				<li class="location_item">
					<table>
						<tr>
							<td colspan="2">
								<p>вул. Богдана Хмельницького, 10 ТЦ "Рубін"</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн-нд   8:00-19:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0987021414">(098) 702 - 14 - 14</a></p>
							</td>
						</tr>
					</table>
				</li>
			</ul>
		</div>
		<div class="location_content" id="tab_3">
			<ul class="locations_list">
				<li class="location_item">
					<table>
						<tr>
							<td colspan="2">
								<p>вул. Ринкова, 68</p>
							</td>
						</tr>
						<tr>
							<td><?= svg('iconClock3','') ?></td>
							<td>
								<p><span>пн       8:00-16:00</span></p>
								<p><span>вт-суб   8:00-18:00</span></p>
								<p><span>нд       8:00-17:00</span></p>
							</td>
						</tr>
						<tr>
							<td>
								<p>тел. <a href="tel:0680517337">(068) 051-73-37</a></p>
							</td>
						</tr>
					</table>
				</li>
			</ul>
		</div>
	</div>
</div>

<script>
	var marker;
	var map;
	
	var locations = {
		vin1: {
			_id: 1,
			lat: 49.239011345354754,
			long:28.498928415802762,
			name: "vin1"
		},
		vin2: {
			_id: 2,
			lat: 49.23589210000001,
			long:28.483061317443838,
			name: "vin2"
		},
		vin3: {
			_id: 3,
			lat: 49.22858719999999,
			long:28.42318891744384,
			name: "vin3"
		},
		vin4: {
			_id: 4,
			lat: 49.23901830892356,
			long:28.498928415741922,
			name: "vin4"
		},
		vin5: {
			_id: 5,
			lat: 49.23595038610184,
			long:28.485605036641132,
			name: "vin5"
		},
		zm: {
			_id: 6,
			lat: 49.03435329625443,
			long: 28.112904515858148,
			name: "zm"
		},
		mp: {
			_id: 7,
			lat: 48.447040537535,
			long: 27.7908668158427,
			name: "mp"
		},
	}
	
	$('.locations_list .location_item').click(function () {
		var $this = $(this);
		var itemClass = $this.attr('data-location');
		var elementId = locations[itemClass]["name"];
		var locLat = locations[itemClass]["lat"];
		var locLong = locations[itemClass]["long"];
		
		if (itemClass === elementId) {
			changeMarkerPos(locLat, locLong);
		}
	});
	
	
	function initialize() {
		var styles = [{
			
		}];
		var styledMap = new google.maps.StyledMapType(styles, {
			name: "Styled Map"
		});
		var mapProp = {
			center: new google.maps.LatLng(49.23595038610184, 28.485605036641132),
			zoom: 16,
			navigationControl: false,
			mapTypeControl: true,
			scaleControl: true
		};
		map = new google.maps.Map(document.getElementById("map"), mapProp);
		
		map.mapTypes.set('map_style', styledMap);
		map.setMapTypeId('map_style');
		
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(49.23595038610184, 28.485605036641132),
		});
		
		marker.setMap(map);
		map.panTo(marker.position);
	}
	
	function changeMarkerPos(lat, lon) {
		myLatLng = new google.maps.LatLng(lat, lon);
		marker.setPosition(myLatLng);
		map.panTo(myLatLng);
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>