Блог

Мне нужно поместить маркеры GoogleMap, нажав на них под картой, чтобы открыть их описание (сообщение из категории). Как можно соединить объекты карты Google и записи в Laravel 4? Какие решения вы можете порекомендовать для этого?

Ссылка на изображение http://postimg.org/image/y1m5mp9m1 /

Я не уверен, что полностью понял ваш вопрос из-за вашего довольно плохого английского, но я постараюсь изо всех сил.

Прежде всего, вы сначала проверили документы? У Google есть очень обширная документация по их Maps API. Ознакомьтесь с документацией здесь: Документация по API карт Google

Убедитесь, что Laravel загружает Maps API в макет / представление, например:

 <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
  

Затем обязательно инициализируйте карту, вот так:

 <script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
  

Я рекомендую создать отдельный файл JavaScript для этого (например: maps.js ).
map-canvas В document.getElementById("map-canvas") описывается, к какому идентификатору элемента применить карту. Убедитесь, что у него установлена высота и ширина, иначе он не будет показан.

Если я вас правильно понимаю, я думаю, вы хотите добавить несколько маркеров на основе записей базы данных сообщений. Один из подходов (который я использую) заключается в создании массива JSON записей базы данных и создании маркера для каждой записи. Это будет выглядеть примерно так:

 <!-- Sets the JavaScript variable db_markers to the json array of $markers -->
<script>var db_markers = {{ json_encode($markers) }}</script>
  

Затем вы хотите создать маркер и информационное окно для каждого элемента в массиве json, это будет выглядеть примерно так:

 var marker, x, infowindow = new google.maps.InfoWindow();

for (x = 0; x < db_markers.length; x  ) {
        var id = db_markers[x];
        var location = new google.maps.LatLng(id.lat,id.lng);
        marker = new google.maps.Marker({
        position: location,
        title: id.name,
        map: map
        });

    google.maps.event.addListener(marker, 'click', (function(marker, x) {
        return function() {
            infowindow.setContent("<b>Title: "   db_markers[x].title);
            infowindow.open(map, marker);
        }
    })(marker, x));
}
  

Если вы чего-то не понимаете, не стесняйтесь комментировать, и я отвечу как можно скорее. Но также проверьте документацию, это действительно полезно. У Google также есть канал YouTube, где их разработчики объясняют вам, как использовать API, ссылки:

• Начало работы с Javascript API карт Google
• Канал Youtube для разработчиков Google