Как добавить точки на гугл карту, сгенерированные php

164
08 июля 2019, 13:10

нужно в js добавить точки на карте, которые тащаться с mysql. Как это реализовать.

пробовал распечатать пхп в див, а потом в js файл вставить var nemap = $('#map').html(); но оно наверно не как объекты вставляеться как реализовать правильно?

сами точки, которые нужно аменить на текст с php

var features = [{ 
					position: new google.maps.LatLng(57.573117, 49.770054), 
					content: '<div class="map-baloon__title">TMT RUSSIA</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}, { 
					position: new google.maps.LatLng(24.248561, 49.277894), 
					content: '<div class="map-baloon__title">TMT</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}, { 
					position: new google.maps.LatLng(-33.91747, 151.22912), 
					content: '<div class="map-baloon__title">TMT</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}];

вот часть кода куда нужно вставить

var initMap = function initMap() { 
				map = new google.maps.Map(document.getElementById('footer-map'), { 
					center: { 
						lat: 37.118944, 
						lng: -128.142917 
					}, 
					zoom: 2, 
					disableDefaultUI: false, 
					disableDoubleClickZoom: false, 
					draggable: true, 
					fullscreenControl: false, 
					keyboardShortcuts: false, 
					panControl: false, 
					scrollwheel: false 
				}); 
 
				/*marker = new google.maps.Marker({ 
				    position: coordinates, 
				    map: map 
				});*/ 
				var iconBase = '/images/sprites/'; 
				var icons = { 
					info: { 
						icon: iconBase + 'marker.svg' 
					} 
				}; 
 
				var features = [{ 
					position: new google.maps.LatLng(57.573117, 49.770054), 
					content: '<div class="map-baloon__title">TMT RUSSIA</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}, { 
					position: new google.maps.LatLng(24.248561, 49.277894), 
					content: '<div class="map-baloon__title">TMT</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}, { 
					position: new google.maps.LatLng(-33.91747, 151.22912), 
					content: '<div class="map-baloon__title">TMT</div>' + '<div class="map-baloon__content">' + '<a class="map-baloon__instagram" href="https://www.instagram.com/themoneyteamshop/" target="_blank"><svg><use xlink:href="images/sprites.svg#instagram"></use></svg>OPEN INSTAGRAM</a>' + '</div>', 
					type: 'info' 
				}]; 
 
				var _loop = function _loop(i) { 
					var marker = new google.maps.Marker({ 
						position: features[i].position, 
						icon: icons[features[i].type].icon, 
						map: map, 
						content: features[i].content 
					}); 
 
					markers.push(marker); 
 
					google.maps.event.addListener(markers[i], "click", function(e) { 
						this.setMap(null); 
 
						var infoBox = new InfoBox({ 
							latlng: this.position, 
							map: map, 
							content: this.content, 
							marker: i 
						}); 
					}); 
				}; 
 
				for (var i = 0; i < features.length; i++) { 
					_loop(i); 
				} 
 
				$.getJSON('/js/googleMapStyle.json', function(data) { 
					map.setOptions({ 
						styles: data 
					}); 
				}); 
			}; 
 
			initMap(); 
		}

Answer 1

Попробуйте создать маркеры таким способом 

var markers = features.map(function (feature) {
    return addMarker(feature, map);
});
function addMarker(feature, map) {
    var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon
        map: map
    });
    var infowindow = new google.maps.InfoWindow({
        content: feature.content    
    });
    marker.addListener('mouseover', function() {
       infowindow.open(map, marker);
    });
    marker.addListener('mouseout', function() {
        infowindow.close();
    });
    return marker;
}

рекомендую использовать функцию

Array.prototype.map

для итерации массива

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как переместить папку в laravel используя Storage?
PHP

Как переместить папку в laravel используя Storage?

Как переместить папку с подпапками и файлами в ларавел используя Storage?

 146
Как выделить дин. память для char[]?
c++

Как выделить дин. память для char[]?

Собсна, насколько я понял, я не могу изменять строку, если я инициализировал на неё указатель, примером, char* a("dududu"); (вызывается исключение...

 528
Как работают с исключениями и блоком try catch
c++

Как работают с исключениями и блоком try catch

Вот есть блок try catch, в нём можно обрабатывать исключенияА как им корректно пользоваться? Если мы обрабатываем какие-то данные в try{обработка...

 183
Стандартные алгоритмы std::copy_backward и std::reverse_copy
c++

Стандартные алгоритмы std::copy_backward и std::reverse_copy

Не смог найти пример, когда удобнее использовать std::copy_backward вместо std::reverse_copyИ чем же существование второго не заставляет забывать о первом?...

 155