I am currently running some tests for a web page that I need to design. As part of this process, I have written some code to add markers on a map and include an Info Window for each marker with specific information:
function placeLocationMarker(latitude, longitude, icon_path, location_name, website_url)
{
//generate marker's info
var contentString = '<div id="content"><div id="siteNotice">' +
'</div><div id="bodyContent"><h4 id="firstHeading" class="firstHeading">' + location_name + '</h4>' +
'<a href=""' + website_url + ' style="text-decoration:none"><b>Website</b></a></div></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var markerPosition = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker
(
{
position: markerPosition,
map: map,
animation: google.maps.Animation.DROP,
icon: icon_path,
title: location_name
}
);
marker.addListener('click', function() {
infowindow.open(map, marker);
});
markers.push(marker);
}
This function is called for each marker that needs to be added to the map:
for(var j = 0; j<interest_points.length; j++)
{
placeLocationMarker(
interest_points[j].Lat,
interest_points[j].Lon,
"http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png",
interest_points[j].Name,
interest_points[j].Wikipedia
);
}
The resulting info window correctly displays all the information, including the URL. However, when I click on the URL, my entire page containing the map simply reloads. On the Google Info Window example page (Google Info Window), clicking a link loads a new page replacing the map. This behavior is not ideal as the loaded page cannot be scrolled and only a portion is visible based on the original map size. I would prefer it if the user could click on the link inside the Info Window and have it open in a new tab to display the loaded page.
Any suggestions or ideas? Thank you.