Posted by tinem on September 19, 2010 at 3:46pm
I need help with this code about how to use it in Drupal, please?
Trying to make StoreLocator http://www.tinemuller.dk/new_new_test_drupal/node/1238 - at the moment I only have ONE row in the table so search for address "939 W El Camino Real, Mountain View, CA" and see in Firebug that the info is showed but NOT the map and I'm sure it's because of the code in the subject.
node/1238
<body style="margin:0px; padding:0px;" onLoad="load()">
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button" onClick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>storelocator.module
<?php
// $Id$
/
* @file
* Googlemap test.
*/
/
* Implementation of hook_init().
*/
function storelocator_init() {
drupal_set_html_head('<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>');
drupal_add_js(drupal_get_path('module', 'storelocator') .'/storelocator.js');
} storelocator.info
; $Id$
name = storelocator
description = storelocator testing.
core = 6.xstorelocator.js
var map;
var markers = [];
var infoWindow;
var locationSelect;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'http://www.tinemuller.dk/new_new_test_drupal/sites/all/storelocator/phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address) {
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}I'm going to make this file http://api.tinemuller.dk/storelocator_v3_tutorial/phpsqlsearch_map.html and are SO close I think.
Don't tell me about map modules because I'm not going to use them.
edited: It's made from this tutorial if anyone is interested http://code.google.com/intl/da/apis/maps/articles/phpsqlsearch_v3.html
Comments
No one can help, please? As
No one can help, please?
As you can see it's functioning http://www.tinemuller.dk/new_new_test_drupal/sites/all/storelocator/phps... - just need to show the map.
OK got it to
OK got it to functioning.
Deleted
body style="margin:0px; padding:0px;" onLoad="load()">and made this in storelocator.jsHave just pasted in my second node info to my content_type_markers which made the table I use and it's functioning. HURRAAAA!!!!!
StreetView for v3 is included
StreetView for v3 is included. I just used this in javascript file
to get it to functioning. Pull the little pegman down to your marker and then just click the cross in the right top to close it. Just SO fantastic.
Now I used node import
Now I used node import http://drupal.org/project/node_import to import the rest from CSV-file to my content_type_markers and Voila all the markers are there now.
edited: Forgot to mention how I got this table because I send it in a private mail to a guy.
But the idea of making it as I have done is to make it functioning in Google Maps API and then get the data using CCK and then find the table that have all the fields and then change the table name from the Google Maps API to use this table. So the first two info I made in Content type and first then imported the rest.
Can I get problem later making my maps like this, please?
One thing I have missed to tell you so you now can make YOUR own map from this tutorial http://code.google.com/intl/da/apis/maps/articles/phpsqlsearch_v3.html is:
Instead of using phpsqlsearch_dbinfo.php and the code connections to this in phpsqlsearch_genxml.php I use db_credentials.php which is in the root of my drupalinstallation including:
?php$db_pass = "xxx";
$db_user = "xxx";
$db_name= "xxx";
$db_server= "xxx";
?>
And in phpsqlsearch_genxml.php I then use this code:
<?php
// Connect to the database
require($_SERVER['DOCUMENT_ROOT'] . '/new_new_test_drupal/db_credentials.php');
$query='';
$debugMessage=array();
$connection=mysql_connect ($db_server, $db_user, $db_pass);
if(!$connection){
$debugMessage[]='Failed to connect to database. Error: '.mysql_error();
}
$db_selected=mysql_select_db($db_name, $connection);
if(!$db_selected){
$debugMessage[]='Failed to select database. Error: '.mysql_error();
}
Everything is functioning using the code this way http://www.tinemuller.dk/new_new_test_drupal/node/1238 but PLEASE could some of the gurus tell us if we can get problems later making our maps this way? - It's very important before some other people use my example!
Or even better don't use module code at all
Or even better don't use module code at all. Much easier to make maps WITHOUT this confusing module stuff that many of us don't understand.
See StoreLocator 2 http://www.tinemuller.dk/new_new_test_drupal/node/1394/
<script type="text/javascript" src="/new_new_test_drupal/sites/all/storelocator2/storelocator2.js"></script>
<style type="text/css">
.sidebarElement{
cursor:pointer;
border-bottom:1px solid gray;
}
</style>
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>Try searching for address: 939 W El Camino Real, Mountain View, CA
<input type="button" onClick="searchLocations()" value="Search"/>
</div>
<div id="sidebar" style="width:20%; height: 400px; float:left; overflow:auto"></div>
<div id="map" style="width: 80%; height: 400px; float:left"></div>
It links to http://www.tinemuller.dk/new_new_test_drupal/sites/all/storelocator2/sto... which links to http://www.tinemuller.dk/new_new_test_drupal/sites/all/storelocator2/php...
Hope this can help a lot of you and if it can let me hear about your project, please? Let us help each other.
figured out openlayers
I have no idea how to do that, but figured out openlayers and it is quite easy.
This tutorial is a good start (note the comment I made, currently the last comment) a filter needs to be added and a few corrections.
http://drupal.org/node/627816
Here is a functioning of the map, each dot represents a node. And everything can be linked.
http://www.missingpups.com/
That site is being developed so could be down for 10 - 15 minutes any time.
Good luck!
Link to nid/store and back again to radius map AND Views
http://www.tinemuller.dk/new_new_test_drupal/node/1394 - Open InfoWindow and click Make a comment and read more about this store here and then click back from link StoreLocator2 map.
Also check Views from menu at the top.
I have uploaded my files for this example
http://www.tinemuller.dk/new_new_test_drupal/div/storelocator2.zip
I got contacted as mentioned:
Hope someone can make a REAL storelocator module from this and can use my code to go further.
/Tine
EDITED: Forgot to mention I have also used Custom links - http://www.tinemuller.dk/new_new_test_drupal/div/customlinks.gif