<select id="cityselect" onchange="selectCity(event)">
<option value="">Seçiniz</option>
</select>
<div id="googlemap" class="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>html, body {
height: 100%;
margin: 0;
padding: 0;
}
#googlemap {
height: 100%;
}
select{
position: absolute;
right: 300px;
top: 100px;
left: auto;
z-index: 1;
border-radius: 0;
color: #51474a;
padding: 10px 15px;
line-height: 20px;
border: none;
font-size: 16px;
cursor: pointer;
outline: none;
}var data = [
{
name: 'İstanbul Merkez',
lat: 41.032636,
lng: 28.990179000000012,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Meclisi Mebusan Cad. Molla Bayırı Sk. No: 1 Fındıklı / İstanbul</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (212) 334 50 54</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (212) 334 50 35</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Meclisi Mebusan Cad. Molla Bayırı Sk. No: 1 Fındıklı / İstanbul</p>'+
'<span class="title"> PHONE : </span>'+
'<p>0 (212) 334 50 54</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (212) 334 50 35</p>'+
'</div>'+
'</div>'
},
{
name: 'Ankara',
lat: 39.888837,
lng: 32.85239899999999,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Aziziye Mh. Piyade Sk. B Blok No: 3/7 Çankaya / Ankara</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (312) 441 75 22</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (312) 441 75 66</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Aziziye Mh. Piyade Sk. B Blok No: 3/7 Çankaya / Ankara</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (312) 441 75 22</p>' +
'<span class="title"> PHONE : </span>'+
'<p>0 (312) 441 75 66</p>'+
'</div>'+
'</div>'
},
{
name: 'İzmir',
lat: 38.429575,
lng: 27.13538600000004,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Cumhuriyet Bulvarı, No: 140, Alan Apt., Kat: 1 Pasaport, Alsancak / İzmir</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (232) 463 12 00</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (232) 463 33 50</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Cumhuriyet Bulvarı, No: 140, Alan Apt., Kat: 1 Pasaport, Alsancak / İzmir</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (232) 463 12 00</p>' +
'<span class="title"> PHONE : </span>'+
'<p>0 (232) 463 33 50</p>'+
'</div>'+
'</div>'
},
{
name: 'Bursa',
lat: 40.182087,
lng: 29.067286999999965,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Hocaalizade Mh, Atatürk Cad. 7. Hamam Sk., Sönmez İş Hanı, No: 5 Kat:3 Ofis No: 1-2-3-9 Osmangazi / Bursa</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (224) 225 40 30</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (224) 225 40 31</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Hocaalizade Mh, Atatürk Cad. 7. Hamam Sk., Sönmez İş Hanı, No: 5 Kat:3 Ofis No: 1-2-3-9 Osmangazi / Bursa</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (224) 225 40 30</p>' +
'<span class="title"> PHONE : </span>'+
'<p>0 (224) 225 40 31</p>'+
'</div>'+
'</div>'
},
{
name: 'Adana',
lat: 37.0044333,
lng: 35.32543529999998,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Cemal Paşa Mahallesi, C.Yurdakul Caddesi, Sular Plaza, No: 47-1003 Seyhan / Adana</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (322) 459 59 80</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (322) 459 59 81</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Cemal Paşa Mahallesi, C.Yurdakul Caddesi, Sular Plaza, No: 47-1003 Seyhan / Adana</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (322) 459 59 80</p>' +
'<span class="title"> PHONE : </span>'+
'<p>0 (322) 459 59 81</p>'+
'</div>'+
'</div>'
},
{
name: 'Antalya',
lat: 36.897006,
lng: 30.71246999999994,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Etiler Mahallesi, Evliya Çelebi Caddesi, Mirador İş Merkezi, No: 3/29, Muratpaşa / Antalya</p>'+
'<span class="title"> TEL : </span>'+
'<p></p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (242) 322 20 97</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Etiler Mahallesi, Evliya Çelebi Caddesi, Mirador İş Merkezi, No: 3/29, Muratpaşa / Antalya</p>'+
'<span class="title"> PHONE : </span>'+
'<p>0 (242) 322 20 90</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (242) 322 20 97</p>'+
'</div>'+
'</div>'
},
{
name: 'Diyarbakır',
lat: 37.9190632,
lng: 40.22915330000001,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Yenişehir Mahallesi, Elazığ Bulvarı No:19/1 Kat: 1 Azel Plaza A Blok Yenişehir / Diyarbakir</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (412) 229 09 00</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (412) 229 09 01</p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Yenişehir Mahallesi, Elazığ Bulvarı No:19/1 Kat: 1 Azel Plaza A Blok Yenişehir / Diyarbakir</p>'+
'<span class="title"> PHONE : </span>'+
'<p>0 (412) 229 09 00</p>' +
'<span class="title"> FAX : </span>'+
'<p>0 (412) 229 09 01</p>'+
'</div>'+
'</div>'
},
{
name: 'Trabzon',
lat: 41.004772,
lng: 39.71001630000001,
content:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADRES </p></div>'+
'<p>Gülbahar Hatun Mahallesi, İnönü Caddesi, No:91/2 Kat:1 Ortahisar / Trabzon</p>'+
'<span class="title"> TEL : </span>'+
'<p>0 (462) 229 06 91</p>' +
'<span class="title"> FAX : </span>'+
'<p> 0 (462) 229 06 02 </p>'+
'</div>'+
'</div>',
content_en:'<div class="content-gamma clearfix map-alpha-content">'+
'<div class="address"><div class="title w100"><p> ADDRESS </p></div>'+
'<p>Gülbahar Hatun Mahallesi, İnönü Caddesi, No:91/2 Kat:1 Ortahisar / Trabzone</p>'+
'<span class="title"> PHONE : </span>'+
'<p>0 (462) 229 06 91</p>' +
'<span class="title"> FAX : </span>'+
'<p> 0 (462) 229 06 02 </p>'+
'</div>'+
'</div>'
}
];
var mapstyle = {
background: [{
featureType: "all",
elementType: "labels.text.fill",
stylers: [{
saturation: 36
}, {
color: "#000000"
}, {
lightness: 40
}]
}, {
featureType: "all",
elementType: "labels.text.stroke",
stylers: [{
visibility: "on"
}, {
color: "#000000"
}, {
lightness: 16
}]
}, {
featureType: "all",
elementType: "labels.icon",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{
color: "#a42d2d"
}]
}, {
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [{
color: "#000000"
}, {
lightness: 17
}, {
weight: 1.2
}]
}, {
featureType: "administrative.country",
elementType: "geometry.fill",
stylers: [{
gamma: "1.00"
}, {
color: "#ca3d3d"
}]
}, {
featureType: "landscape",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: "20"
}, {
gamma: "1"
}, {
saturation: "0"
}]
}, {
featureType: "poi",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: "20"
}]
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#000000"
}, {
lightness: 17
}]
}, {
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
color: "#000000"
}, {
lightness: 29
}, {
weight: .2
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 18
}]
}, {
featureType: "road.local",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 16
}]
}, {
featureType: "transit",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 19
}]
}, {
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: "10"
}]
}]
}
function initMap() {
// İlk açılışta haritayı ortalayacağı yer
var turkey = {lat: 39.060481, lng: 35.179593};
var map = new google.maps.Map(document.getElementById('googlemap'), {
zoom: 6,
styles: mapstyle.background,
disableDefaultUI: true,
center: turkey
});
var markers = [];
var contents = [];
var infowindows = [];
var cities = document.getElementById('cityselect');
for (var i = 0; i < data.length; i++) {
// Haritaya eklenecek noktalar
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: map,
index: i
});
// Sitenin diline göre data'daki ingilizce içeriği çektiği yer. Buranın doğru çalışabilmesi için dilin html tagına lang eklenmeli
if(document.documentElement.lang == "en"){
contents[i] = data[i].content_en
} else{
contents[i] = data[i].content
}
infowindows[i] = new google.maps.InfoWindow({
content: contents[i],
maxWidth: 300
});
// pin'lere tıklanınca ne yapacağı
google.maps.event.addListener(markers[i], 'click', function() {
infowindows[this.index].open(map,markers[this.index]);
map.panTo(markers[this.index].getPosition());
// tıklanılan haricindeki pencerelerin lapatılması
for (let j = 0; j < markers.length; j++) {
if(j != this.index){
infowindows[j].close(map,markers[j]);
}
}
});
// select box'ın dinamik olarak data'dan doldurulması
cities.options[cities.options.length] = new Option(data[i].name, i);
}
// şehir seçince ne yapılacağı
selectCity = function(evt){
let ind = evt.target.value;
if(ind == ""){ // "Seçiniz" seçeneği seçilirse
// haritayı ortalıyor
var pos = new google.maps.LatLng(turkey);
map.panTo(pos);
// tüm info alanlarını kapatıyor
for (let j = 0; j < markers.length; j++) {
infowindows[j].close(map,markers[j]);
}
} else{
// seçtiği şehri ortalıyor
infowindows[ind].open(map,markers[ind]);
map.panTo(markers[ind].getPosition());
// seçtiği şehrin haricindeki info alanlarını kapatıyor
for (let j = 0; j < markers.length; j++) {
if(j != ind){
infowindows[j].close(map,markers[j]);
}
}
}
}
}initMap()
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.