Being new to the world of JavaScript, I've been given the task of converting an old jVector map to the Google Maps API. Surprisingly, I think I'm making good progress! I've successfully populated the map with the right markers in their assigned locations, complete with stylish info windows that pop up when clicked. Everything seems to be working well at this point.
However, I've hit a bump in the road while attempting to dynamically change Google Maps icons upon map load, depending on whether a string from an array matches one of 8 different types. The specific code snippet I've been struggling with is as follows:
Data Array Example
The array contains around 30 stories, but for clarity, I'm omitting the content and providing the code structure below:
var stories = [
// ACT Markers
// ACT ICT
{
latlng: [-35.3449476, 148],
name: "Business name - tagline after the business name",
type: "ICT",
text: 'some basic text marked up with html',
},
Main Code Example:
window.onload = function() {
LoadMap();
};
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-content"), mapOptions);
for (var i = 0; i < stories.length; i++) {
var storydata = stories[i];
var myLatLng = new google.maps.LatLng(storydata.latlng[0], storydata.latlng[1]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: storydata.name,
content: storydata.text,
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title + this.content);
infowindow.open(map, this);
});
}
Everything has been functioning smoothly so far, but there might be a more efficient way to achieve this. Given my novice status in JavaScript, I'm open to suggestions or improvements.
Categorization Challenge:
Now, I'd like to change the icon based on the "type" attribute within "stories". I've been experimenting with the following code snipped sourced from various Stack Overflow threads (apologies for not having the links), but I'm unsure where to insert it or if I'm even on the right track:
for (var item in stories) {
if (stories[i].type == 'Agrifood') iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
else if (stories[i].type == 'Biotechnology') iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
else if (stories[i].type == 'BuiltEnvironment') iconString = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
else if (stories[i].type == 'Energy') iconString = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
else if (stories[i].type == 'Engineering') iconString = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
else if (stories[i].type == 'ICT') iconString = 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png';
else if (stories[i].type == 'Manufacturing') iconString = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
else if (stories[i].type == 'Mining') iconString = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
else iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
}
I would greatly appreciate any guidance or assistance you can offer in solving this issue. Thank you very much!