Добавьте несколько различных сложных значков и информационных полей в карты Google api V3

Я занимаюсь разработкой сайта для некоторых праздничных мероприятий (это моя первая разработка сайта).

Я работал над страницей местоположения с картами google api V3 и хочу принять ее дальше. На данный момент у меня есть только два пользовательских маркера, но я хочу расширить это, чтобы у меня было около 20, чтобы показать различные вещи в этой области. Они будут разделены на категории, такие как "семья" и "шоппинг", причем каждая категория имеет другую иконку маркера. Поэтому мне нужно будет сказать 5 разных стилей значков, каждый стиль которых находится в 4 разных местах. Вдобавок к этому мне понадобится информационное окно для каждого, которое будет отображаться при щелчке маркера и исчезнет при щелчке по другому маркеру.

Я совершенно новый для javascript, и он все еще выглядит очень сложным для меня, поэтому, если кто-нибудь сможет объяснить, как это сделать, мы будем очень благодарны. Текущий код ниже и то, как он выглядит в настоящее время, находится здесь: http://www.upthorpelodges.co.uk/test/location.html

2 ответа

Вы можете создать объект json объектов json, где вы сохраните свои пользовательские изображения. Что-то вроде этого

customImgObj = {
 'family' : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE},
 'couples' : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE},
 'other' : {'image' : YOUR_IMAGE_GOES_HERE, 'shadow' : YOUR_SHADOW_GOES_HERE}
};

Затем у вас есть ваш массив местоположений, где вы храните один дополнительный элемент, который является типом маркера.

var locations = [
 ['Lodges', 52.316, 0.901, 'family'],
 ['Other', 52, 1, 'couples']
];

И вы обращаетесь к нему так

for (var i = 0; i < locations.length; i++) {

 var lodge = locations[i];

 var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]);

 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map,
 shadow: customImgObj[lodge[3]].shadow,
 icon: customImgObj[lodge[3]].image,
 shape: shape,
 title: lodge[0],
 zIndex: lodge[3] //<--- where do you keep this? In your locations array there are only three element (0, 1, 2)
 });
}


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

licensed under cc by-sa 3.0 with attribution.