0
I am using the Google Maps API to show the location of some of the company’s stores. I used this tutorial to get.
So far so good. But the problem is that I have a menu with the map locations and I would like to link them to each marker inside the map. How do I do that?
Here’s what I got so far:
var map;
var idInfoBoxOpened;
var infoBox = [];
var markers = [];
function initialize() {
var latlng = new google.maps.LatLng(-19.922787, -43.945141);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("innerMapa"), options);
}
initialize();
function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxOpened) == 'number' && typeof(infoBox[idInfoBoxOpened]) == 'object') {
infoBox[idInfoBoxOpened].close();
}
infoBox[id].open(map, marker);
idInfoBoxOpened = id;
}
function loadSpots() {
$.getJSON('path/to/marker/spots.json', function(spots) {
$.each(spots, function(index, spot) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(spot.Latitude, spot.Longitude),
title: "Find a nearby store",
map: map,
icon: '/path/to/image/spot.png'
});
var myOptions = {
content: spot.Texto,
pixelOffset: new google.maps.Size(-150, 0)
};
infoBox[spot.Id] = new InfoBox(myOptions);
infoBox[spot.Id].marker = marker;
infoBox[spot.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(spot.Id, marker);
});
});
});
};
loadSpots();
Wow, exactly! I also needed to feed Mark with the properties of the site using:
markers[ponto.Id]=marker;
– GuiHarrison