Стилизация инфо-окна google maps

425
16 февраля 2017, 00:06

Всем доброго дня. Подскажите пожалуйста как можно стилизовать свое информационное окно на карте гугл? Буду рад любым подсказкам. Прилагаю свой код и примеры.

function showOnMap(markerkey) { 
  map.setCenter(latLng[markerkey]); 
  map.setZoom(14); 
} 
$(document).ready(function() { 
  $('.ggl-map-btn').click(function() { 
    showOnMap($(this).data('mapkey')); 
    console.log($(this).data('mapkey')); 
  }); 
}); 
var latLng = [{ 
    lat: 25.221829, 
    lng: 55.434515 
  }, { 
    lat: 25.099150, 
    lng: 55.205056 
  }, { 
    lat: 25.232732, 
    lng: 55.385531 
  }, { 
    lat: 25.115208, 
    lng: 55.195457 
  }, { 
    lat: 25.2648841, 
    lng: 55.3741042 
 
  } 
 
]; 
var all_markers = []; 
var all_shops = [{ 
  lat: 25.221829, 
  lng: 55.434515, 
  name: "Uptown Mirdif" 
 
}, { 
  lat: 25.099150, 
  lng: 55.205056, 
  name: "Al Barsha, Dubai" 
}, { 
  lat: 25.232732, 
  lng: 55.385531, 
  name: "Al Rashidiya, Bin Sougat Centre, Dubai" 
}, { 
  lat: 25.115208, 
  lng: 55.195457, 
  name: "Kiosk in Al Barsha Mall, Dubai" 
}, { 
  lat: 25.2648841, 
  lng: 55.3741042, 
  name: "Kiosk in Emirates Co-operative Society, Dubai" 
}]; 
 
var map, infoWindow; 
var returnCenter = { 
  lat: 25.182732, 
  lng: 55.334515 
}; 
 
function CenterControl(controlDiv, map) { 
  var controlUI = document.createElement('div'); 
  controlUI.style.backgroundColor = '#fff'; 
  controlUI.style.border = '2px solid #fff'; 
  controlUI.style.borderRadius = '5px'; 
  controlUI.style.cursor = 'pointer'; 
  controlUI.style.margin = '0 10px'; 
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
  controlUI.style.textAlign = 'center'; 
  controlUI.title = 'Click to recenter the map'; 
  controlDiv.appendChild(controlUI); 
 
  var controlText = document.createElement('div'); 
  controlText.style.color = 'rgb(25,25,25)'; 
  controlText.style.fontFamily = 'Raleway, sans-serif'; 
  controlText.style.fontSize = '14px'; 
  controlText.style.lineHeight = '40px'; 
  controlText.style.paddingLeft = '5px'; 
  controlText.style.paddingRight = '5px'; 
  controlText.innerHTML = 'Center Map'; 
  controlUI.appendChild(controlText); 
 
  controlUI.addEventListener('click', function() { 
    map.setCenter(returnCenter); 
    map.setZoom(11); 
  }); 
} 
 
function initMap() { 
  var centerLatLng = new google.maps.LatLng(25.182732, 55.334515); 
 
  var mapOptions = { 
    center: centerLatLng, 
    zoom: 11, 
    navigationControl: false, 
    mapTypeControl: false, 
    scaleControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    scrollwheel: false, 
    disableDoubleClickZoom: true, 
    rotateControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }; 
 
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 
  var centerControlDiv = document.createElement('div'); 
  var centerControl = new CenterControl(centerControlDiv, map); 
  centerControlDiv.index = 1; 
  map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(centerControlDiv); 
  infoWindow = new google.maps.InfoWindow(); 
  google.maps.event.addListener(map, "click", function() { 
    infoWindow.close(); 
  }); 
  for (var i = 0; i < all_shops.length; i++) { 
    var latLng = new google.maps.LatLng(all_shops[i].lat, all_shops[i].lng); 
    var name = all_shops[i].name; 
    addMarker(latLng, name); 
  } 
} 
google.maps.event.addDomListener(window, "load", initMap); 
 
function addMarker(latLng, name) { 
  var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map, 
    title: name, 
    icon: '/wp-content/themes/katrina/upload/images/logos/cace_icon.png' 
  }); 
  all_markers.push(marker); 
 
  google.maps.event.addListener(marker, "click", function() { 
    var contentString = '<div>' + 
      '<h3 class="Info-window">' + name + '</h3>' + '</div>'; 
    infoWindow.setContent(contentString); 
    infoWindow.open(map, marker); 
  }); 
} 
$(document).ready(function() { 
  $('.ggl-map-btn-one').click(function() { 
    google.maps.event.trigger(all_markers[$(this).data('mapkey')], "click"); 
  }); 
});

Example

Answer 1

Используйте мастер стилей от Google.

READ ALSO
JQuery,animate() - как сделать анимированный блок

JQuery,animate() - как сделать анимированный блок

Дело таково что надо сделать рекламный блок который движется снизу на вверх и исчезает, затем опять появляется снизу и так до бесконечности

242
Не cрабатывает в css &ldquo;background-image&rdquo;

Не cрабатывает в css “background-image”

Помогите пожалуйста, почему фоновое изображение не появляется? Если просто как картинку вставить в HTML - то всё в порядке, а как фоновое изображение...

247
Слетели стили на IE

Слетели стили на IE

В Хроме, Опере, Мазиле со стилями всё ок, в ИЕ ощущение, что даже не включались, что делать в такой ситуации ? Есть вот такая штука в коде, но судя...

312