Placing a single marker on a Google Map (Using API 3)

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.

The HTML

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

The CSS

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

The JS

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'
    });
 }