Custom Google Maps

Question

In my HTML page instead of using:

function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: new google.maps.LatLng(51.489021, -0.1164075),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: styles
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
}

I'd like to use a Custom Map I've created.

https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80

But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?

Answer 1

Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.