We Keep Coding

Image enlarge on click and hotspots

I have a large map of the UK with multiple walking routes marked on. Currently the map is split into zones but walkers have asked to see the map as a whole so they can link routes together.
However, the routes then look very small. Is it possible to have a map with a clickable scale on one side that allows then to zoom into an area of the map. The map needs to be draggable and once zoomed in to still allow hotspotting. Is this possible?

You need to initialize the map with a init() function and pass necessary parameters that would enable controls like zoom and drag.
Add this code to your Google Map page.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}
});
}
For additional details, take a look at this official document.

Google map acting weird

I have the most basic google map embeded in my website and this is what I ended up with when I included google maps api in the and wrote this piece of code in the external script which I include in the after the google maps api:
I can't do anything with it (zoom in or out, move the view around with the mouse..) except for switching between map and satellite. When I paste the exact same code in the w3schools "Try it yourself" area, everything works fine.
JavaScript:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(45.1676, 14.7589),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(mapCanvas, mapOptions);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Don't know if it has to do anything with my css settings but I can't paste the code here cause it's quite large.
Thanks for any suggestions

If anyone wants to know the problem was that the parent div of the map was set to height: 100% and that is what caused that glitch to happen.

Custom Google Maps

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?

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.

Google maps not display entire map on the div container

I have a div with a google map inside but the map is not showing entirely.. just shows a part of the map and the other it's all grey and if i move the map with the cursor, the maps visual part moves fine but the size changes but not taking the entire div size.
This is the div and a snapshot:
<div style="height: 275px; width: 715px;" id="map_display"></div>

You need to trigger a resize event in Google maps like
google.maps.event.trigger(myMap, 'resize');
After initializing the Google maps

The answer provided Here may be of use to you, the problem is likely that the map has been loaded prior to the sizing of the div (is it perhaps dynamically sized?).
Loading the map after the rest of the page elements should help.

Working Fiddle
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_display"), myOptions);
}
$(document).ready(function () {
InitializeMap();
});

my kml layer is showing but its off to the left

Im trying to add my map to my website, so far ive gotten it to show my map but its offset to the left by a few km
work in progress so far with markers off to the left: http://www.decking.co.il/indexwip.html#
my google maps site with the markers in the right place: http://goo.gl/maps/atvDH
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(32.147711,34.972229);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=211701918214336350936.0004be32c642b750948e4',
{preserveViewport:true});
ctaLayer.setMap(map);
}
please can somebody tell me what im doing wrong? ive been searching all day for a solution, am I mixing the wrong commands? Have I over complicated it somewhere? I've seen theres a way to simply embed into a webpage but I dont know how to make that embed appear inside the box thats provided for it in the template I'm using

It doesn't look "off to the left" to me. It looks like you have a css conflict like that discussed here.