How To: Use the Google Map API in a node without a module.
yvelle - September 19, 2006 - 15:05
In case anyone else is looking to do this: Once you sign up for Google Maps and get a key, you might wonder how to put a map in a node without having to put the load() and GUnload() functions in the body tag. The following code shows the method I used. Just be sure to have a lax filter so that no tags are scrapped.
** Warning: This method will probably cause problems on pages that aggregate more than one node on a page, since the javascript might be loaded more than once.**
<script
src="http://maps.google.com/maps?file=api&v=2&key="INSERT_YOUR_KEY_HERE"
type="text/javascript">
</script>
<script type="text/javascript">
function applyst() {
load();
if( window.XTRonload ) { window.XTRonload(); }
}
function savest() {
GUnload();
if( window.XTRonunload ) { window.XTRonunload(); }
}
//load handling adapted from
//http://www.brothercake.com/site/resources/scripts/onload/
if( window.addEventListener ) {
window.addEventListener( 'load', applyst, false );
window.addEventListener( 'unload', savest, false );
} else if( document.addEventListener ) {
document.addEventListener('load' , applyst, false );
document.addEventListener( 'unload', savest, false );
} else if( window.attachEvent ) {
window.attachEvent( 'onload', applyst );
window.attachEvent( 'onunload', savest );
} else {
if( window.onload ) { window.XTRonload = window.onload; }
if( window.onunload ) { window.XTRonunload = window.onunload; }
window.onload = applyst;
window.onunload = savest;
}
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(29.958839,-90.074458), 16);
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
<div id="map" style="width: 500px; height: 300px"></div>I found these javascript functions by googling for them, so don't claim to be smart in any way.
can not show the markers and ployline with Internet Explorer
on firefox is perfected working, but no markers at all in IE?
working example
in case it is useful for anyone, I am using this code to show a simple google map in a "static page" node in drupal5 (full html input format) without extra modules.
<div id="map_canvas" style="margin: 10px auto 0px; width: 700px; height: 390px;"> </div> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_GOOGLE_MAP_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geoXml;
function initialize() {
if (GBrowserIsCompatible()) {
geoXml = new GGeoXml("http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.842286,-4.08691449), 1);
map.setUIToDefault();
map.addOverlay(geoXml);
}
}
initialize();
</script>
I am using georss map but if you need different map just modify the initialize() function.
I have a function that
I have a function that creates a marker and sends some html to the infowindow for each marker to display when there is a click event. I've testing this outside of the Drupal environment with success but I'm receiving an error when I embed the code into a page node.
Could someone suggest a possible fix to this issue? Also, the map isn't shown at all in IE.
<div style="margin: 10px auto 0px; width: 540px; height: 390px;" id="map_canvas"></div>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_GOOGLE_MAP_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl (new GSmallMapControl());
map.addControl (new GMenuMapTypeControl());
map.addControl(new GScaleControl());
map.setMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(33.5,-79.00),9);
var pt = new GLatLng(33.80930166666667, -78.64991833333333);
var html = <strong>North Myrtle Beach - 1</strong>;
var marker = createMarker(pt,html);
map.addOverlay(marker);
var pt = new GLatLng(33.780656666666665, -78.63569333333);
var html = <strong>North Myrtle Beach - 2</strong>;
var marker = createMarker(pt,html);
map.addOverlay(marker);
}
}
initialize();
</script>