Wrights HQ
A blog by Ian Wright - Front-end web developer
on Experimental
I have done a lot of work with Google Maps in Drupal 7 with getLocations. I am now building out my own custom map scripts to understand the full features Google has to offer & see what’s possible.
In this example I am just placing a single marker on the map using London Eye’s latitude & longitude coordinates.
<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);
// Add a marker to the map based on our coordinates
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'London Eye, London'
});
}