Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Google Maps API, как добавить текст к маркеру? (https://javascript.ru/forum/library-toolkit-framework/62775-google-maps-api-kak-dobavit-tekst-k-markeru.html)

drpozitiff 28.04.2016 20:24

Google Maps API, как добавить текст к маркеру?
 
Здравствуйте. Вот какая проблема: есть карта, добавил маркер, добавил окно информации, пулпап - это все работает. Но не могу никак добавить адрес, на который указывает маркер. Просмотрел все примеры на сайте Google maps API, курил документацию, гуглил. Ничего. Это либо невозможно (хотя если генерить айфрейм через "поделиться" в самих картах гугла - подпись есть) либо я очень сильно туплю, так как это очевидная вещь.
Вот как оно должно выглядеть:


function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 16,
		center: {lat: 49.397, lng: 28.644},
	});
	var geocoder = new google.maps.Geocoder();

	window.onload = function() {
		geocodeAddress(geocoder, map);
	};
}

function geocodeAddress(geocoder, resultsMap) {
	var address = document.getElementById('address').value;
	var infowindow = new google.maps.InfoWindow({
			content: "hi"
	});
	geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
		resultsMap.setCenter(results[0].geometry.location);
		marker = new google.maps.Marker({
			map: resultsMap,
			position: results[0].geometry.location,
			title: address,
			draggable: false
		});
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

рони 28.04.2016 20:37

Цитата:

Сообщение от drpozitiff
document.getElementById('address')

это input?

drpozitiff 28.04.2016 20:40

да

drpozitiff 28.04.2016 20:47

<input id="address" type="textbox" value="Хмельниьке шосе, 13">
<div id="map"></div>

это по сути весь html
Подключаем так:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_zbBKBYP1-MLldK3xCN04GxUwmXXMGnM&signed_in=true&callback=initMap"
        async defer></script>

key - ключ, генерится на сайте гугл мэпс апи

рони 28.04.2016 21:18

drpozitiff,
может так?
<input type="text" id="address"  value="Хмельницьке шосе, 13">

function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    var infowindow = new google.maps.InfoWindow({
            content: address
    });
    geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
        resultsMap.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
            map: resultsMap,
            position: results[0].geometry.location,
            title: address,
            draggable: false
        });
       infowindow.open(resultsMap, marker);


    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

drpozitiff 28.04.2016 21:28

Неа, это инфобокс, который появляется по клику на маркер. Выглядит вот так:

рони 28.04.2016 21:36

drpozitiff,
кроме label которая добавляет одну букву, не нашёл в документации ничего для текста.

drpozitiff 28.04.2016 21:48

так и я вот тоже... Картинки, слои, всякая полезная фигня... а текст добавить нельзя.

andrey3681 05.09.2016 10:41

infowindow google maps api отображаются не над маркером, а в стороне, и с содержимым последнего Подскажите пожалуйста в чем проблема

... добавляю маркеры на карту из массива
for (var i = 0; i < objects.length; i++) {
    var ll = objects[i].coordinates.split(',');
    var latlng = new google.maps.LatLng(ll[0], ll[1]);
    var address = [];
    address = objects[i].address;
    if (distHaversine(latlng, circleOptions.center) < radius) {
        infowindow = new google.maps.InfoWindow({
            content: address
        });
        objects_markers[i] = new google.maps.Marker({
            position:latlng,
            clickable:true,
            map: map,
            title: address,
            animation: google.maps.Animation.DROP,
            visible: true,
            icon: 'images/beachflag.png'
        });
        objects_markers[i].addListener('click', function() {
            infowindow.open(map, objects_markers[i]);
        });
    }

рони 05.09.2016 11:35

andrey3681,
веротно не учитываите что i везде одно и тоже.
уберите for , замените на forEach


Часовой пояс GMT +3, время: 23:39.