Wrights HQ
A blog by Ian Wright - Front-end web developer
on Experimental
In this example we have now added a few extra lines of code which allows us to display an info window when our map marker is clicked.
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
// Set the latitude & longitude for our location (London Eye)
var myLatlng = new google.maps.LatLng(51.503454,-0.119562);
var mapOptions = {
center: myLatlng, // Set our point as the centre location
zoom: 14, // Set the zoom level
mapTypeId: 'roadmap' // set the default map type
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Allow our satellite view have a tilted display (This only works for certain locations)
map.setTilt(45);
// Create our info window content
var infoWindowContent = '<div class="info_content">' +
'<h3>London Eye</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +
'</div>';
// Initialise the inforWindow
var infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
});
// Add a marker to the map based on our coordinates
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'London Eye, London'
});
// Display our info window when the marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}