Google maps API v3 - Несколько маркеров с пользовательской ссылкой URL + пользовательский значок

Первый раз, пытаясь построить карту с помощью API карт Google и попал в блокпост.Google maps API v3 - Несколько маркеров с пользовательской ссылкой URL + пользовательский значок

Я пытаюсь сделать пользовательскую карту, которая имеет:

Множественные маркеры расположения
Пользовательские значки для маркеров
Пользовательский URL ссылки для каждого маркера, так что когда кто-либо нажимает на маркер, они переходят по ссылке URL-адреса

Карта предназначена для клиента, который владеет несколькими офисами в Сохо, Лондон. Я тестировал различный код на игровой площадке Google +, используя тестер кода w3 для школ. Я нахожу примеры того, как настраивать различные элементы моей карты, которые все работают нормально, когда делаете это один за другим.

Однако кажется, что я хотел объединить все функции карты, которые необходимо настроить по-разному.

Вот что я до сих пор:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
<div id="map" style="width: 100%; height: 300px;"></div> 

<script type="text/javascript"> 
var locations = [ 
    ['56-58 Broadwick Street', 51.5053, -0.1481, 5], 
    ['79 Wardour Street', 51.512370, -0.133300, 3], 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: new google.maps.LatLng(51.5132695,-0.1356768), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 
var markers = new Array(); 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 

function AutoCenter() { 
    // Create a new viewpoint bound 
    var bounds = new google.maps.LatLngBounds(); 
    // Go through each... 
    $.each(markers, function (index, marker) { 
    bounds.extend(marker.position); 
    }); 
    // Fit these bounds to the map 
    map.fitBounds(bounds); 
} 
AutoCenter(); 

</script> 
</body>

Идея заключается в том, что места вар будут различные офисные места, что мой клиент самостоятельно. Каждый из этих маркеров местоположения офиса свяжется с соответствующей служебной страницей.

Извините, что вам нужно спросить вас, но может ли кто-нибудь привести меня в правильном направлении? Я думал, что могу объединить весь код вместе, но похоже, что если я хочу объединить все 3 функции, код будет настроен по-другому.

Спасибо за ваше время.

источник

2013-12-11 Stockypotty

Может быть, вы должны включать в себя соответствующий URL-адрес в массиве маркеров. Затем используйте закрытие функции для связывания URL-адреса с маркером, как это сделано в [ответе на этот вопрос] (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker -example) – geocodezip

[Ссылка на веб-страницу] (http://stackoverflow.com/questions/19081850/to-link-marker-to-web-page) – geocodezip

Для начала, а не для вашего JS в теле вашего документа, переместите его в голову.

И добавить прослушиватель событий для когда окно нагрузки вызвать функцию инициализации, которая создает карту:

google.maps.event.addDomListener(window, 'load', initialize);

И переместить все JS, что в настоящее время не в какой-либо функции, вообще, в этой инициализации функции.

Я не уверен в вашей функции AutoCenter. Если это просто, чтобы карта расширялась, чтобы она соответствовала границам ваших маркеров, добавьте ее в свою функцию инициализации.

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

var locations = [ 
    ['56-58 Broadwick Street', 51.5053, -0.1481, 5], 
    ['79 Wardour Street', 51.512370, -0.133300, 3], 
];

источник

2013-12-11 16:31:34 duncan

Google maps API v3 - Несколько маркеров с пользовательской ссылкой URL + пользовательский значок

ответ

Смежные вопросы