I'm trying to leverage the OL api as outlined here to simply add a marker and maybe some zooming stuff at runtime.

Basically, how do I access the map object to interact with it with JS ?

I'm pasting this code 

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));

in the browser console at a example map on openlayers.org and it adds a marker, when i paste it in my drupal site it returns "ReferenceError: map is not defined".

I've tried several combinations to define the map object like var map = Drupal.openlayers; with no luck...

thank you please :)

Comments

TimTheEnchanter’s picture

TimTheEnchanter commented

Hello Smiro,
One thing about open layers in drupal that is hard to find is that the openlayers data is stored with the jQuery.data() function. For example so you can access your open layers map by using the .data() function on the container of the map itself like below.

var ol = $('#openlayers-map').data('openlayers');

var markers = new OpenLayers.Layer.Markers( "Markers" );
ol.openlayers.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));