привет, я очень новичок в этой теме и через несколько часов пытаюсь приблизиться к цели, но не там, я думаю, мне понадобится небольшой удар.Карты Google: добавьте несколько маркеров с информационным ящиком на пользовательскую карту
до сих пор мне удалось создать стилизованную карту и получить 2 маркера в позиции на карте. zoom и некоторые другие вещи мне понятны, как влиять.
вот код:
<html>
<head>
<title> test map </title>
<style type="text/css">
#map {
width: 750px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init()
{
var mapOptions = {
zoom: 2,
panControl: true,
zoomControl: true,
center: new google.maps.LatLng(33.524385, -112.048899),
//
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "landscape",
"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": 0.2}]}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 18}]}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 16}]}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 21}]}, {
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"}, {
"color": "#000000"}, {
"lightness": 16}]}, {
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36}, {
"color": "#000000"}, {
"lightness": 40}]}, {
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"}]}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 19}]}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}, {
"weight": 1.2}]}]
};
var mapElement = document.getElementById('map');
var myMap = new google.maps.Map(mapElement, mapOptions);
var pos = new google.maps.LatLng(33.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
var pos = new google.maps.LatLng(5.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
}
</script>
</head>
<body>
<div id="map"> </div>
</body>
</html>
, что отлично работает для меня. Я вижу стиль, который мне нравится, плюс 2 позиции с классическим маркером.
Карта из кода выше Sample
тогда я выглядел немного больше вокруг и обнаружил, что вы можете иметь коробки Информация с маркерами. Я хотел бы добавить HTLM в эти поля для каждого маркера, который я создаю.
рег. Google. дает этот пример, который отлично работает для меня:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en
я хотел бы добавить пару тех, к моей карте, как я сделал на 2 простой маркерной postions, но я честно не знаю, куда поместить код, который я вижу в приведенной выше ссылке.
пробовал все виды в течение последних 2 часов и теперь питался. я делаю что-то неправильно, так как это должно работать.
Вишня на конфетах тогда, если бы кто-то знал, где поместить код, чтобы дать Маркер мой собственный стиль. Я нашел несколько примеров для этого. поэтому мне было бы здорово, если бы он был обычным.
thx за вашу помощь, идеи или все, что вы вносите!
Возможный дубликат [API JS API для Google Maps v3 - Пример простого множественного маркера] (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip
hi geocodezip.я видел сообщение, которое вы упоминаете как возможный дубликат, было полезно понять тему для маркеров лучше для меня, но она не говорит о том, чтобы говорить о добавлении определенных стилей к карте с этими маркерами информационного поля. это действительно моя проблема. как вы видели, я мог построить карту с инфобоксами, а также html в ней, но не дать ей черный стиль, который я хочу в комбо. – user3116868
Укладка карты отделена от маркеров. Вы можете использовать код с несколькими маркерами со своей стилизованной картой. – geocodezip