For the EWEA 2014 venue map, we implemented a custom Google Map.
The settings we made were to the map position. marker position, marker type and info box:
<html>
<head>
<style type="text/css">
html, body {margin: 0; padding: 0; height: 100%;}
#infoContents {color: #000; font-family: "Franklin Gothic Medium", sans-serif; font-size: 13px; min-width: 150px; min-height: 100px; padding: 0 20px 0 20px;}
#infoContents h4 {padding: 0; margin: 1em 0 0.5em 0; color: #005596;}
#infoContents p {margin: 0; padding: 0;}
#infoContents small {margin: 10px 0 0 0; display: block;}
#infoContents small a {font-size: 10px; font-family: "Franklin Gothic Medium", sans-serif; color: #005596;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var spot = new google.maps.LatLng(41.354867,2.138019);
var mapCenter = new google.maps.LatLng(41.355600,2.138019);
var mapOptions = { center: mapCenter, zoom: 17, mapTypeId: google.maps.MapTypeId.SATELLITE };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var iconShadow = new google.maps.MarkerImage(
"http://www.google.com/mapfiles/ms/micons/msmarker.shadow.png",
new google.maps.Size(59,32),
new google.maps.Point(0,0),
new google.maps.Point(15,32));
var marker = new google.maps.Marker({
map: map,
position: spot,
icon: "http://www.google.com/mapfiles/markerA.png",
shadow: iconShadow
});
var infowindow = new google.maps.InfoWindow({
content: '<div id="infoContents"><h4>NORTH ENTRANCE</h4><p>Fira de Barcelona Gran Via<br />Carrer del Foc 31<br />08038 Barcelona, Spain<br /><small><a href="http://goo.gl/maps/GIytH" target="_blank">Go to street view</a></small></p></div>'
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 740px; height: 400px;"></div>
</body>
</html>
This gives a result like this:
