Не могу добавить маркеры на карту гугл

ЭЙ! «Спасибо, люди :) Я новичок в html, поэтому мне может понадобиться помощь :) Я пытался поместить карту Google поверх страницы, если быть точным: высота: 500/600 пикселей и ширина: 100%. Нет проблем. Но когда я пытаюсь добавить несколько маркеров (в виде URL-ссылок и пользовательских значков), они не отображаются. панель поиска с автозаполнением и несколько маркеров «ссылка»? Скажи мне, что я сделал не так? Я искал ответ немного, похоже, не нашел его. Заранее спасибо..

если кто-то не может это прочитать (извините, не знаю, как это правильно отформатировать), вот ссылка на мой мега с html. Никаких вирусов, не угрожайте, пожалуйста.

    <https://mega.co.nz/#!8lAi2I4Q!cPb3XJKccd54Qm8QtnBV2QBWt42KVDFzgI89ZnRCBJo>

А вот тот же код из html:

<html>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
type="text/javascript"></script>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>                    <title>Garinfo</title>
<style>
html, body, #map-canvas {
height: 85%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px;  /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">            </script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(45.242629, 19.827195),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
map.fitBounds(bounds);
var location1 = new google.maps.Map.LatLng(45.239115, 19.824766)
var location2 = new google.maps.Map.LatLng(45.244517, 19.847312)
var marker1 = new google.maps.Marker({

position: Location1,
url: 'http://www.facebook.com/',
map: map
    });
var marker2 = new google.maps.Marker({
position: Location2,
url: 'http://www.google.com/',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body onunload="GUnload()">
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(45.239115, 19.824766),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
url: 'http://www.google.com/',
map: map
});
    google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>

javascript jquery maps markers
person user3799813    schedule 03.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

парень!

Анализируя и тестируя ваш код, я обнаружил как минимум 3 проблемы:

1) Вы дважды добавляете карту на страницу. Посмотрите на строки 69 и 159.

2) Исправляем строки 112 и 113:

var Location1 = new google.maps.Map.LatLng(45.239115, 19.824766);
var Location2 = new google.maps.Map.LatLng(45.244517, 19.847312);

Им не хватало ";" и имя переменной не соответствовало имени, используемому в маркерах:

var marker1 = new google.maps.Marker({
  position: Location1,  //it should be written like this Location1
  url: 'http://www.facebook.com/',
  map: map
});

var marker2 = new google.maps.Marker({
  position: Location2, //it should be written like this Location2
  url: 'http://www.google.com/',
  map: map
});

3) Маркеры выше (1 и 2) не добавляются. Да, это тр. Это может быть по некоторым причинам:

  • 3.1) возможно, функция places_changed в строке 86 не вызывается;
  • 3.2) Places.length может быть равен 0, поэтому метод возвращает строку 90;

запуск приведенного выше кода напрямую добавляет два маркера, не путая поле поиска (я переместил его за пределы функции places_changed, прямо над ним, и исправил ошибки javascript).

Вероятно, вы обнаружите больше проблем, но это необходимо исправить, прежде чем продолжить.

person Rafael Brasil    schedule 03.07.2014
comment
Я посчитал строки, основанные на вашем файле, скачанном через Мегу. - person Rafael Brasil; 03.07.2014