Menu
I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.
<c:forEach var="product" items="products">
${product.name}
</c:forEach>
I also checked the answer of this question but did not help much.
Google Map Code
var pinColor = "FE7569";
var marker, i;
var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";
// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);
// Create pinShadow for each marker
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
// Function to create the dynamic marker
function pinImage(i){
return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}
// Function to run once page has loaded
function initialize(){
var geocoder=new google.maps.Geocoder();
// Set Default settigns for google map
var settings = {
zoom: 3,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {
(function(i) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i == 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
})(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize)
Desirable output is similar to following image, each result has a named marker and its location is shown by its associated marker on the map. I need markers to be alphabetical not numbered also based on coordinate not address.
251
Face North: At the bottom, tap the compass. Tilt the map: With 2 fingers, touch and hold the map, then move your fingers up and down the screen. Rotate the map: With 2 fingers, touch and hold the map, then move your fingers around each other on the screen.
In the Google Cloud Console, go to the Map Styles page. Select the style you want, and click Customize Style.
EDIT: Changed the snippet to get the marker image from chart.apis.google.com. (I'm not sure why googlemapsmarkers.com stopped working).
You can get the url from the marker, and display it as an image. Here is a code snippet to illustrate:
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<style>
#map-canvas,
#marker-container {
width: 50%;
height: 600px;
margin: 0px;
padding: 0px;
float: left;
}
.marker-description {
padding-left: 40px;
}
.place {
padding-left: 10px;
}
.marker {
display: inline-block;
width: 21px;
height: 35px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div id="marker-container"></div>
<script>
var map;
var markers = [];
var pinColor = "FE7569";
// Function to create the dynamic marker
function pinImage(imagenum) {
// should check for more than 32 pins...
var ch = 'A'
var makerLetter = String.fromCharCode(ch.charCodeAt(0) + imagenum);
return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + makerLetter + "|" + pinColor);
}
function initialize() {
var newYork = new google.maps.LatLng(40.7773514, -73.9554338);
var mapOptions = {
zoom: 13,
center: newYork,
disableDefaultUI: true,
mapTypeControlOptions: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var request = {
location: newYork,
radius: 5000,
types: ['store']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i];
var placeLoc = place.geometry.location;
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location,
icon: pinImage(i)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>");
$("#marker-container").append(description);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>It sounds like you want letters instead of numbers inside your pin:
// Function to create the dynamic marker
function pinImage(i) {
var letter = String.fromCharCode(i + 65); // 'A' is 65.
return new google.maps.MarkerImage(
"http://www.googlemapsmarkers.com/v1/" + letter + "/" + pinColor + "/",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
}
Also, you need to create objects that keep track of the address, latlng, and index of each of your markers. I suggest you use map.data to do this. https://developers.google.com/maps/documentation/javascript/reference#Data
var addresses = ['New York', 'San Francisco'];
addresses.forEach(function(address, i) {
// Create a feature.
var feature = map.data.add({
'id': i,
'properties': {'address': address}
});
// Display the feature in the list.
$('.address-list').append($('<div>')
.append($('<img>').attr('src', pinImage(i)))
.append($('<div>').text(address)));
// Do more fancy things here
// Geocode the feature and position it on the map.
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
feature.setGeometry(results[0].geometry.location);
if (i == 0) {
map.setCenter(results[0].geometry.location);
}
}
});
});
Then you can control the display of the markers like this:
map.data.setStyle(function(feature) {
return {
title: feature.getProperty('address'),
zIndex: feature.getId(),
icon: pinImage(feature.getId()),
shadow: pinShadow
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
