By anilnair on

While checking into the original problem (with Subject 'Some help needed', ran into something that looks like a trivial problem, but I can not seem to figure it out..

The scenario is same as in the original post.. Block 1 loads Gmap, and Block 2 (PHP) has a form and buttons.

Block 1

Block 2

I am trying to have a point marked on the map when modules are loaded. Since Block 1 is Javascript based, I used drupal_add_js to call a function that was loaded in Block 1. The function uses a 'map' object that is created in Block 1. When rendered into the browser all code is on the same page. When the page is loaded I get 'map has not properties'

The code (from 'view source') is below (sorry.. it is a bit long). If the code is saved as an .html file, and loaded into a browser, it will generate that error. If anyone could take a look at it, and see what could be happenning, that would be great... and thanks in advance..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drupal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/Projects/misc/favicon.ico" type="image/x-icon" />
<script src="http://maps.google.com/maps?file=api&v=2&key=www" type="text/javascript"></script>
<style type="text/css">
#gmap {
width: 80%;
height: 400px;
margin:0;
padding:0;
}
</style>

<style type="text/css" media="all">@import "/Projects/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/Projects/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/Projects/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/Projects/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/Projects/themes/garland/style.css";</style>
<script type="text/javascript" src="/Projects/misc/jquery.js"></script>
<script type="text/javascript" src="/Projects/misc/drupal.js"></script>
<script type="text/javascript" src="/Projects/JavaScripts/AKN_test.js"></script>

<style type="text/css" media="print">@import "/Projects/themes/garland/print.css";</style>
<!--[if lt IE 7]>
<style type="text/css" media="all">@import "/Projects/themes/garland/fix-ie.css";</style>
<![endif]-->
</head>
<body class="sidebar-left">

<!-- Layout -->
<div id="header-region" class="clear-block"></div>

<div id="wrapper">
<div id="container" class="clear-block">

<div id="header">
<div id="logo-floater">
<h1><a href="/Projects/" title="Drupal"><img src="/Projects/themes/garland/logo.png" alt="Drupal" id="logo" /><span>Drupal</span></a></h1> </div>

<ul class="links primary-links"><li class="first last menu-1-1-2-active"><a href="/Projects/?q=Projects" title="Projects" class="menu-1-1-2-active active">Projects</a></li>
</ul>
</div> <!-- /header -->

<div id="sidebar-left" class="sidebar">
<div id="block-user-1" class="clear-block block block-user">

<h2></h2>

<div class="content">
<ul class="menu">
<li class="leaf"><a href="/Projects/?q=Projects" class="active"></a></li>
<li class="collapsed"><a href="/Projects/?q=node/add">Create content</a></li>
<li class="leaf"><a href="/Projects/?q=user/1">My account</a></li>

<li class="collapsed"><a href="/Projects/?q=admin">Administer</a></li>
<li class="leaf"><a href="/Projects/?q=logout">Log out</a></li>

</ul>
</div>
</div>
</div>

<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<div class="breadcrumb"><a href="/Projects/">Home</a></div>

<div class="messages status">
<form action="/Projects/?q=Projects" accept-charset="UTF-8" method="post" id="dummy-form">
<div><input type="hidden" name="form_token" id="edit-dummy-form-form-token" value="45afe8d4fec4aba36a39183d742d9955" />
<input type="hidden" name="form_id" id="edit-dummy-form" value="dummy_form" />

</div></form>
<div id="block-googlemap-0" class="clear-block block block-googlemap">

<div class="content"><font size=+3>Projects</font><br /><br /><font face='Arial'; size='1'>Zoom the map to the region you wish, and then click on a street to start defining the project<br /><bre /> If the map is not zoomed properly, the first click would zoom to the point.</font><div id="gmap"></div>
<script type="text/javascript">
var map;
var firstTime = true;
var firstPoint = true;
var startPoint;
var endPoint;
var startMarker = new GIcon(G_DEFAULT_ICON);startMarker.image = "Markers/StartMarker.png";
var startMarkerOptions = { icon:startMarker }
var endMarker = new GIcon(G_DEFAULT_ICON);endMarker.image = "Markers/EndMarker.png";
var endMarkerOptions = { icon:endMarker }
function init(){
LoadMap();
}
window.onload=init;
function LoadMap() {
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById("gmap"));
var dirn = new GDirections();
var gpolys = [];
var startMarker = new GIcon(G_DEFAULT_ICON);startMarker.image = "http://localhost/Projects/Markers/StartMarker.png";
var startMarkerOptions = { icon:startMarker }
var endMarker = new GIcon(G_DEFAULT_ICON);endMarker.image = "http://localhost/Projects/Markers/EndMarker.png";
var endMarkerOptions = { icon:endMarker }
GEvent.addListener(map, 'click', mapClick);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
if (firstTime == true) {

map.centerAndZoom(new GPoint(-73.234,43.765), 5);

firstTime = false;
}
}
}

function loadProject_fromSearch(lat1, long1, lat2, long2) {
alert ("hello .. I am here");
map.panTo(48, -97);
var startPoint = new GLatLng(lat1, long1);
map.setCenter(startPoint);
var endPoint = new GLatLng(lat2, long2);
mapClick(marker, startPoint);
mapClick(marker, endPoint);
};
var startMarker;
var endMarker;
function mapClick(marker, point) {
if (firstPoint) {
if (map.getZoom() < 15) {
map.setCenter(point,15);
return;
}
startMarker = new GMarker(point, startMarkerOptions);
map.addOverlay(startMarker);
var startLat = document.getElementById("StartLat");
var startLong = document.getElementById("StartLong");
startLat.value = point.lat();
startLong.value = point.lng();
startPoint = point;
firstPoint = false;
} else {
firstPoint = true;
endMarker = new GMarker(point, endMarkerOptions);
map.addOverlay(endMarker);
var endLat = document.getElementById("EndLat");
var endLong = document.getElementById("EndLong");
endLat.value = point.lat();
endLong.value = point.lng();
endPoint = point;
var curProjectPoints = new Array (startPoint, endPoint);
var curDirection = new GDirections(map);
curDirection.loadFromWaypoints(curProjectPoints,{getPolyline:true});
GEvent.addListener(curDirection,"load", function() {
var n = (curDirection.getPolyline()).getVertexCount();
var newStart = (curDirection.getPolyline()).getVertex(n-2);
var newEnd = (curDirection.getPolyline()).getVertex(n-1);
var startLat = document.getElementById("StartLat");
var startLong = document.getElementById("StartLong");
var endLat = document.getElementById("EndLat");
var endLong = document.getElementById("EndLong");
startLat.value = newStart.lat();
startLong.value = newStart.lng();
endLat.value = newEnd.lat();
endLong.value = newEnd.lng();
startMarker.remove();
endMarker.remove();
});
};
};
function testFunction() {
var startPoint = new GLatLng(45.01217712932065, -75.0291109085083);
var endMarker = new GMarker(startPoint);
map.addOverlay(endMarker);
};
</script>

</div>
</div>
<div id="block-Projects-0" class="clear-block block block-Projects">

<div class="content"><font size=+2>Project's data</font><br /><br />Array<form action="/Projects/?q=Projects" accept-charset="UTF-8" method="post" id="projectsData-form">
<div><input type="hidden" name="Node_Id" id="edit-Node-Id" value="0" />
<input type="hidden" name="Project_Id" id="edit-Project-Id" value="0" />
<div class="form-item">
<label for="ProjectName">Project Name: </label>
<input type="text" maxlength="128" name="Project_Name" id="ProjectName" size="60" value="" class="form-text" />

</div>
<div class="form-item">
<label for="ProjectType">Project Type: </label>
<input type="text" maxlength="128" name="Project_Type" id="ProjectType" size="60" value="" class="form-text" />
</div>
<div class="form-item">
<label for="StartLat">Start Latitude: </label>
<input type="text" maxlength="128" name="Start_Lat" id="StartLat" size="15" value="" class="form-text" />
</div>
<div class="form-item">
<label for="StartLong">Start Longitude: </label>

<input type="text" maxlength="128" name="Start_Long" id="StartLong" size="15" value="" class="form-text" />
</div>
<div class="form-item">
<label for="EndLat">End Latitude: </label>
<input type="text" maxlength="128" name="End_Lat" id="EndLat" size="15" value="" class="form-text" />
</div>
<div class="form-item">
<label for="EndLong">End Longitude: </label>
<input type="text" maxlength="128" name="End_Long" id="EndLong" size="15" value="" class="form-text" />
</div>

<input type="submit" name="Add" id="edit-0" value="Add" class="form-submit" />
<input type="submit" name="Load" id="edit-1" value="Load Projects" class="form-submit" />
<input type="hidden" name="form_token" id="edit-projectsData-form-form-token" value="23ebe9589034e350acd9c72cdaaee037" />
<input type="hidden" name="form_id" id="edit-projectsData-form" value="projectsData_form" />

</div>
</form>
</div>
</div>
<span class="clear"></span>
<div id="footer">
</div>
</div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->

</div> <!-- /container -->
</div>
<!-- /layout -->
<script type="text/javascript">
<!---
testFunction();
//-->
</script>

</body>
</html>

⋅ Categories: Drupal 5.x

Comments

criznach’s picture

criznach commented

GMaps take some time to initialize, and your test function is being executed immediately. I'd recommend doing something like setTimeout(testFunction, 100) which will wait 1/10 of a second to call the function. You may also want to wrap that code in something like this...

// This is JQuery's way of waiting until the document is fully loaded and ready.
 $(document).ready(function() {
  // Then wait an additional 1/10 of a second to call your test function.
  setTimeout(testFunction, 100);
}

http://www.trailheadinteractive.com

gabrielu’s picture

gabrielu commented

Do we have the GEvent object ready onload?
http://code.google.com/apis/maps/documentation/javascript/v2/reference.h...
I am trying to figure out a way to attach, rather than base on a timeout.

Sincerely,
Gabriel Ungureanu
https://ag-prime.com/

jaypan’s picture

jaypan
Location Victoria, BC
commented

Your problem here is related to what the other poster said. The problem is that you are loading your javascript inline. You do need to wrap it in an calling function as the other poster said, but you need to do this in the Drupal.behaviors object, which is the Drupal equivalent of the $(document).ready() function. However, in order to have access to this object, you need to put your javascript in an external document. If there are dynamic elements to your maps (different maps for different pages), you need to add them to the Drupal.settings object.

Simple example. This is a callback function for a path I will have mapped in hook_menu():

function my_callback_function($id)
{
  // first add the main javascript coducment
  drupal_add_js(drupal_get_path('module', 'my_module') . 'my_module.js);
  // next get the dynamic data, whatever it is
  $data = db_result(db_query('SELECT something FROM {some_table} WHERE something_else = %d', $id));
  // third create an array with the settings in it keyed by setting name
  $settings = ('mySetting' => $data);
  // fourth add the settings to Drupal.settings. Do this in an array so as to put the settings in your modules namespace.
  drupal_add_js(array('myModule' => $settings), 'setting');
  // Put the rest of the callback function here:
  $output = '<div id="map">Javascript didn't load</div>'; // as an example for google maps
  return $output;

my_module.js:

Drupal.behaviors.myModule = function()
{
  // this will be called onload. Put everything in here
  // the setting we passed earlier will be in the Drupal.settings object. It will be 
  // of the following pattern: Drupal.settings.[MODULENAME].[SETTINGNAME] (due to the way we added it
  // with the various arrays in the callback function)
  alert(Drupal.settings.myModule.mySetting);
}

For a live example, look at this page: http://www.after-hours-japan.com/Establishment/300-bar-ginza-5-chome
I have put together a google maps module on this site, and this is exactly how I have done it. You can see the settings I have added right there in the source, in the Drupal.settings object, and you can see the script itself if you looked at the linked javascript page (you will have to find the gmap code in there)

Contact me to contract me for D7 -> D10/11 migrations.