Zoom on markers and create sidebar/Block with categories

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
nivlem's picture
Posted by nivlem on November 22, 2009 at 3:08am

Hi all, Im new to the group, hope you are all well!

I have been switching a site that i have been working on into using Drupal rather than my own fully coded site. So far its all going well and just recently i discovered that Drupal also has support for Google Map API. This is great news as i already have the google api working on my site as i want it so if i can get the Gmap and location modules to acheive what i already have that should almost complete the site and i can go LIVE!

I have managed to setup Gmap and Location, i followed the tutorial on http://www.drupaltherapy.com/gmap. So far i just have a page showing the google map and i have a create marker page under Create Content which populates my map with markers and locations of my choice,
-- See attached Pic-GMap.So.Far.JPG --

What i want to know is how to best go about getting my markers to function the way they do on my web site where i dont use drupal but i do have a working Google Map with a sidebar that contains a categorised list of all the markers on the site. When i click the links or the markers the map zooms to the location. I am so happy with the functionality i'm looking forward to getting the same working within drupal.
-- See attahced Pic-The.Result.i.Would.Like.JPG --

The below code makes up the 2 files that i use on my web site currently so you can see what code i am using. Hope fully someone can see what im trying to acheive and give me some advice on where to begin.

-- A PHP page that created to show the Google Map --

This is the web page that users view to see the map as it is on attached picThe.Result.i.Would.Like.JPG

<?php
session_start();

<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Site</title>
<link rel="stylesheet" href="/css/testnewpage.css" type="text/css" media="screen" />
<script src="maxheight.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=MYGOOGLEKEYGOESHERE" type="text/javascript">
</script>
<style type="text/css">

body { height: 600px; font-family: Verdana; }
.normal { background-color:#EFEFEF; }
.focus { background-color:#E0E0E0; }

</style>

</head>
<body onload="load()" onunload="GUnload()">

      <div class="column-right maxheight">
           <div class="sidebar" overflow:auto; id="sidebar">
           </div>
      <div class="column-center">
            <div class="map" id="map">
            </div>
      </div>

<script type="text/javascript">
//<![CDATA[

var map, actual;
var gmarkers = [];
var markerdata = [];


var ltblue = new GIcon();
ltblue.image= "images/GoogleMarkerIcons/ltblue-dot.png";
addIcon(ltblue);

var pink = new GIcon();
pink.image= "images/GoogleMarkerIcons/pink-dot.png";
addIcon(pink);

var blue = new GIcon();
blue.image= "images/GoogleMarkerIcons/blue-dot.png";
addIcon(blue);

var brown = new GIcon();
brown.image= "images/GoogleMarkerIcons/brown-dot.png";
addIcon(brown);
 
var green = new GIcon();
green.image= "images/GoogleMarkerIcons/green-dot.png";
addIcon(green);

  var orange = new GIcon();
orange.image= "images/GoogleMarkerIcons/orange-dot.png";
addIcon(orange);
 
var purple = new GIcon();
purple.image= "images/GoogleMarkerIcons/purple-dot.png";
addIcon(purple);
 
var red = new GIcon();
red.image= "images/GoogleMarkerIcons/red-dot.png";
addIcon(red);

  var white = new GIcon();
white.image= "images/GoogleMarkerIcons/white-dot.png";
addIcon(white);
 
  var yellow = new GIcon();
yellow.image= "images/GoogleMarkerIcons/yellow-dot.png";
addIcon(yellow);
  
  var ltorange = new GIcon();
ltorange.image= "images/GoogleMarkerIcons/ltorange-dot.png";
addIcon(ltorange);



var icons = { "Essex": pink, "Cambridgeshire": brown, "Devon": ltblue, "Lincolnshire": blue, "Suffolk": green, "Hampshire": orange, "Bedfordshire": red, "Cheshire": purple, "Hertfordshire": ltorange, "Norfolk": ltblue, "Surrey": purple, "Yorkshire": yellow, "Cornwall": pink, "Durham": green, "Derbyshire": pink, "Sussex": green };

function addIcon(icon) { // Add icon attributes for all icons

icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(9, 34);
icon.infoWindowAnchor = new GPoint(19, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
}

// Create the markers and set up the event window
function createMarker(point, name, html, category, id) {
    var marker = new GMarker(point, icons[category] );
    // Store category, name, id and icon as marker properties
    marker.category = category;
    marker.name = name;
    marker.id = id;
    marker.icon = icons[category];
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    // Hovering over the markers
    GEvent.addListener(marker, "mouseover", function() {
        marker.setImage("images/white-dot.png");
        var hovered = document.getElementById(id);
        if(hovered) {
            hovered.className = "focus";
            actual = hovered; // Store this element
        }
    });

    GEvent.addListener(marker, "mouseout", function() {
        marker.setImage(icons[category].image);
        if(actual) { actual.className= "normal"; }
    });

  gmarkers.push(marker);
  return marker;
}


var hover = { // Hovering over the links
over: function(id) {
  // Set another background color for the link
  var hovered = document.getElementById(id);
  hovered.className = "focus";

  // Set another marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage("images/white-dot.png");
   }
  }
},

out: function(id) {
  // Set the default link background
  var hovered = document.getElementById(id);
  hovered.className = "normal";

  // Set the default marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage(gmarkers[i].icon.image);
   }
  }
}
}

var visible= { // Make a category (un)visible
show: function(category) {
  // Show all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].show();
   }
  }
   // Set the checkbox to true
   document.getElementById(category).checked = true;
},

hide: function(category) {
  // Hide all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].hide();
   }
  }
  // Clear the checkbox of a hidden category
  document.getElementById(category).checked = false;
  map.closeInfoWindow();
}
}

function boxclick(box, category) {

  // Hide or show the category of the clicked checkbox
  if(box.checked) { visible.show(category); }
  else { visible.hide(category); }

  // Rebuild the sidebar
  makeSidebar();
}

// Trigger the clicks from the sidebar to open the appropriate infowindow
function Info(i) {
  GEvent.trigger(gmarkers[i],"click");
}


// Rebuild the sidebar to match currently displayed markers
function makeSidebar() {

  var oldheader;

  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
   
   //var countyLat = gmarkers[i].countyLat;   
       var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += '<br \/><li><b><a href="#" onclick="moveMapto('+markerdata[i].countyLat+','+markerdata[i].countyLng+',8);return false;">'+ header+'</a></b></li>';
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onclick="moveMapto('+markerdata[i].lat+','+markerdata[i].lng+','+markerdata[i].zoom+');return false;" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
}

// function to deal with having the county headings links to a new location and zoom
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}

//
// This function zooms in or out
    // its not necessary to check for out of range zoom numbers, because the API checks
    function myzoom(a) {
      map.setZoom(map.getZoom() + a);
    }

// Create the map
function load() {
  if(GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addMapType(G_PHYSICAL_MAP);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //map.enableContinuousZoom();
   map.enableScrollWheelZoom();
   map.setCenter(new GLatLng(52.2195,-3.5),6, G_HYBRID_MAP);
   readData();
  }
}


function readData() {

var request = GXmlHttp.create();
request.open("GET", "GoogleMarkers.php", true);
request.onreadystatechange = function() {
  if(request.readyState == 4) {
  // Use the browsers XML parser
  // var xml = request.responseXML;

  // Use Googles XML parser
  var xml = GXml.parse(request.responseText);

   var markers = xml.documentElement.getElementsByTagName("marker");

   for(var i = 0; i < markers.length; i++) {
    // Obtain the attribues of each marker
    var lat = parseFloat(markers[i].getAttribute("lat"));
    var lng = parseFloat(markers[i].getAttribute("lng"));
       var zoom = markers[i].getAttribute("zoom");

    var point = new GLatLng(lat,lng,13);
    var address = markers[i].getAttribute("address");
    var id = markers[i].getAttribute("nr");
    var name = markers[i].getAttribute("name");
    var html = markers[i].getAttribute("html");
    //var html = "<b>"+name+"<\/b><p style='font-size:smaller'>" + address + "<\/p>";
    var category = markers[i].getAttribute("category");
  var countyLat = parseFloat(markers[i].getAttribute("countyLat"));
    var countyLng = parseFloat(markers[i].getAttribute("countyLng"));
    // Create the markers
   
    var mdata  = new objXMLMarker(lat,lng,zoom,point,address,id,name,html,category,countyLat,countyLng);
    markerdata.push(mdata);
   
    map.addOverlay(createMarker(point, name, html, category, id));
   }

if(gmarkers) {

   // Sort categories and names to display
   // both in alphabetic order
   gmarkers.sort(compareCats);
   markerdata.sort(compareCats);
  
}
   // Show or hide the categories initially

   makeSidebar();
  }
}; request.send(null);
}


var compareCats = function(a, b) {

var n1 = a.name;
// Treat German umlauts like non-umlauts
n1 = n1.toLowerCase();
n1 = n1.replace(/ä/g,"a");
n1 = n1.replace(/ö/g,"o");
n1 = n1.replace(/ü/g,"u");
n1 = n1.replace(/ß/g,"s");

var n2 = b.name;

n2 = n2.toLowerCase();
n2 = n2.replace(/ä/g,"a");
n2 = n2.replace(/ö/g,"o");
n2 = n2.replace(/ü/g,"u");
n2 = n2.replace(/ß/g,"s");

var c1 = a.category;
var c2 = b.category;

// Sort categories and names
if(a.category == b.category){
  if(a.name == b.name){
   return 0;
  }
   return (a.name < b.name) ? -1 : 1;
}

return (a.category < b.category) ? -1 : 1;
}

function objXMLMarker(lat,lng,zoom,point,address,id,name,html,category,countyLat,countyLng){

    this.lat = lat;
    this.lng = lng;
    this.zoom = zoom;
    this.point = point;
    this.address = address;
    this.id = id;
    this.name = name;
    this.html = html;
    this.category = category;
  this.countyLat = countyLat;
    this.countyLng = countyLng;
}

//]]>
</script>

</body>
</html>
?>

-- The code below is the code i use to get the GMarker info from my Database Table.

This is the code that queries my MySQL DB marker table to get the gmarker info, lat, lng etc....

<?

<?php
require_once('Connections/reg_con.php');
?>

<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;   
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_reg_con, $reg_con);
$query_rts_fisheries = "SELECT counties.county_lat AS countyLat, counties.county_lng AS countyLng, UK_Fisheries.fishery_id, UK_Fisheries.venue, UK_Fisheries.county, UK_Fisheries.lat, UK_Fisheries.lng, UK_Fisheries.img, UK_Fisheries.zoom FROM UK_Fisheries inner join counties on UK_Fisheries.county = counties.county_name ORDER BY UK_Fisheries.county ASC";
$rts_fisheries = mysql_query($query_rts_fisheries, $reg_con) or die(mysql_error());
$row_rts_fisheries = mysql_fetch_assoc($rts_fisheries);
$totalRows_rts_fisheries = mysql_num_rows($rts_fisheries);
?>

<? header('Content-type: text/xml'); ?>

<?php
do {
?>

Zoom In</a><a href="javascript:myzoom(-10)">Zoom Out</a><div style="width:310px">

<?php
echo $row_rts_fisheries['venue'];
?>
.<image src="images/waters/
<?php
echo $row_rts_fisheries['img'];
?>
" width=300 height=245></div>' name='
<?php
echo $row_rts_fisheries['venue'];
?>
' category='
<?php
echo $row_rts_fisheries['county'];
?>
' countyLat='
<?php
echo $row_rts_fisheries['countyLat'];
?>
' countyLng='
<?php
echo $row_rts_fisheries['countyLng'];
?>
'/>

<?php
} while ($row_rts_fisheries = mysql_fetch_assoc($rts_fisheries));
?>

<?php
mysql_free_result($rts_fisheries);
?>

?>

AttachmentSize
GMap.So_.Far_.JPG91.26 KB
The.Result.i.Would_.Like_.JPG124.34 KB
Categories: , , , ,

Comments

How did you get it to work on Drupal?

Posted by lyosef on January 6, 2011 at 9:33pm
lyosef's picture

How did you get this to work in Drupal? I need to do the same thing.

Location and Mapping

Group organizers

Group categories

Wiki type

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: