By yvelle on

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&amp;v=2&amp;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.

⋅ Categories: Drupal 4.7.x

Comments

lvbeck’s picture

lvbeck commented

on firefox is perfected working, but no markers at all in IE?

esplinter’s picture

esplinter commented

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;">&nbsp;</div>  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;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.

qtrimble’s picture

qtrimble
he/him/his
Location Chapel Hill, North Carolina
commented

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&amp;v=2&amp;sensor=false&amp;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>