i have this very simple google map that I want to be displayed as the first thing you see on my drupal homepage. Any suggestion on how I can get it on there nicely? I've tried using a module called insertFrame and using their shorthand, but it is an old module and I can't seem to get it working... Thanks for any and all advice!
var overlay;
var myCenter=new google.maps.LatLng(##.######, -##.######);
var marker;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var myLatLng = new google.maps.LatLng(##.######, -##.######);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.MAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var swBound = new google.maps.LatLng(##.######, -##.######);
var neBound = new google.maps.LatLng(##.######, -##.######);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
marker=new google.maps.Marker({
position:myLatLng,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
overlay = new USGSOverlay(bounds, srcImage, map);
}
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.border = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);
};
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
};
USGSOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = 'hidden';
}
};
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == 'hidden') {
this.show();
} else {
this.hide();
}
}
};
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id ="panel">
<input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
<input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
</div>
<div id="map-canvas"></div>
</body>
</html>
In this case I think your code is custom enough that it can go directly into your templates as opposed to in a node or a block or anything like that.
Your page template contains the markup for your page and you can override this to have a specific template just for your home page.
To do this copy your theme's page.tpl.php to page--front.tpl.php (if your theme doesn't have a page.tpl.php you can get it from your theme's base theme or else the drupal core system module) - then clear your drupal cache so the new template gets picked up.
Then you would add your map canvas div markup in the place you want your map to go.
Then copy all your javascript code into a javascript file and call it something like map.js and put it in your theme (in it's javascript or js directory if your theme has one).
Then you can load your js file for the home page only by using drupal_add_js() in your template_preprocess_html() function of your template.php file of you theme like this:
function THEMENAME_preprocess_html(&$variables) {
// Add js for the homepage map.
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path('theme', 'THEMENAME') . '/js/map.js');
}
}
Alternatively you might want to write a custom module that implements a custom block that prints the map div and adds the map js.
There are a number of ways you can add the map so it depends on your requirements as to which is the best option for you.