Monitor Reply

Support

Maps

Permalink Browser Info Environment August 09, 2013 at 1:40 PM

Hi All
love this add on, being trying it with different stuff for a while now and have it doing numerous things on my site at the moment even though its still in development.
Just wanted to explain what i managed to get working incase anyone else wanted to do the same.
Basically i have an advanced form for admins so that they can add points onto a google map on the site.
Integrated into the page with the advanced form i have a small google map with a draggable pointer that sets the new point as as well the fields having all the info i need for each point.
On the main page then i have data display list template with code for a google map that plots all the points.
Its working pretty well so far. If anyone wants to know the code i used (i'm no expert so could probably make much more of it then i have) i'll post it here.
Great add on, finding so much to do with it

adam

Type:	Discussion
Status:	New

ProjbyP replied on Sep 20, 2013 at 2:51 pm Permalink Reply

Please post the code ... I wish there was a code repository rather than having to look through the posts to find the good stuff! :-)

fauners replied on Sep 21, 2013 at 11:39 am Permalink Reply

Hi
Sorry for the delay. Been pretty busy. Ok here is what I have done. It is a bit crude but it works!
So first form is one that takes the details of points on a map. So inputs I have are:
location Name
Location Category(drop down, hoping to have it sortable at some point but not yet!)
Address (comes up automatically with google geolocation)
Description
Lat
Long

So I have that form on one page, I got the ID's of the form elements for lat, long and address. I also put the whole form in a div called infopanel. Needed this for the google map.

So then the map I have in a html block with this code

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var myCoordsLenght = 6;
function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

Viewing 15 lines of 72 lines. View entire code block.

 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var myCoordsLenght = 6;
function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}
 
function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}
 
function updateMarkerPosition(latLng) {
                document.getElementById('info').innerHTML = [
                    latLng.lat(),
                    latLng.lng()
                ].join(', ');
 
//document.getElementById('posit').innerHTML = [
                document.getElementById("sem-field-45").value = latLng.lat().toFixed(myCoordsLenght);
    document.getElementById("sem-field-46").value = latLng.lng().toFixed(myCoordsLenght);
            }
 
function updateMarkerAddress(str) {
  document.getElementById('sem-field-47').innerHTML = str;
}
 
function initialize() {
  var latLng = new google.maps.LatLng(0.336105, 38.01216);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 5,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  });
 
  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
 
  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
 
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
 
  google.maps.event.addListener(marker, 'dragend', function(evt) {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
 
  });
 
 
}
 
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 100%;
    height: 400px;
 
  }
img{max-width:none}
 
  </style>
 
  <div id="mapCanvas"></div>

The sem-field-45 and stuff are the IDs of the form inputs. the centre of the map is the varlatLng

So this brings up a map with a draggable pointer, when you move it the address auto fills in and the lat long fills in as well.

So that saves the data as you would expect in advanced forms.
So for the template for data display i have the following:

Header:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Map Locations Clickable sidebar</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style>
    #map_canvas { width  : 100%;
        height : 500px;
       margin-top: 20px;}
  </style>
<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = "";

Viewing 15 lines of 38 lines. View entire code block.

 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Map Locations Clickable sidebar</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style>
    #map_canvas { width  : 100%;
        height : 500px;
 
       margin-top: 20px;}
 
  </style>
<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
 
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
      var map = null;
 
function initialize() {
  // create the map
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(-0.037659,38.464018),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
 
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
 
  // Add markers to the map
  // Set up three markers with info windows 
  // add the points

and then in the main section the following

var point = new google.maps.LatLng(<field name="Latitude" />,<field name="Longitude" />);
var marker = createMarker(point,"<field name="Location Name" />","<b><field name="Location Name" /></b><br /><field name="Location Category" /><br /><i><field name="Address" /></i><br /><field name="Description" />")
​

then in the footer

// put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({

Viewing 15 lines of 48 lines. View entire code block.

 
// put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
}
 
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
 
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
 
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
 
 
    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    //http://www.bisphamchurch.org.uk/...   
    //http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    //http://econym.org.uk/gmap/basic2.htm... 
//]]>
</script> 
 
  </head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
 
    <!-- you can use tables or divs for the overall layout --> 
 
           <div id="map_canvas"></div> 
 
 
 
    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 
 
 
  </body> 
</html>

And thats it. I know it's a bit crud and to be honest you could get a better system working with one of the map addons in the marketplace. But this was me more wanting to use the same system for lots of things.
i also have AF/DD working with Google Geo Charts for some pretty cool international maps with countries selectable. You can see one here
http://www.evosecinternational.com/risk-map/...
Thats has a side bar also that updates on clicking a country.
the Geo Charts can also be country maps rather than international and have cities or states selectable.
And because Geo Charts is basically the same as the other Google Charts you should be able to get any of the other charts (pie, bar, scatter) working.
Need anything else just gimme a shout.

Adam

apc123 replied on Nov 12, 2013 at 12:49 pm Permalink Reply

Hi,

I've not spent a lot of time with Google maps API. Can this work with an address instead of lat/long?

I want to read in form data where users have entered their address and lat/long is not available.

Thanks,
Anthony

fauners replied on Nov 12, 2013 at 1:26 pm Permalink Reply

Hi Anthony
It is possible all right although I haven't done it.
You can see some examples here.
https://developers.google.com/maps/documentation/javascript/examples...

The exact thing you want isn't there but I had a quick look around and what you need to do is use code along these lines

var mygc = new google.maps.Geocoder();
mygc.geocode({'address' : '1600 Pennsylvania Avenue NW Washington, DC 20500'}, function(results, status){
    console.log( "latitude : " + results[0].geometry.location.lat() );
    console.log( "longitude : " + results[0].geometry.location.lng() );
});

This should return lat/long for an inputted address. This doens't fit exactly into my code and unfortunately I'm a bit swamped so can't try it myself.

Actually here is an example of exactly what you want I think

http://gmaps-samples.googlecode.com/svn/trunk/geocoder/singlegeocod...

EDIT

Actually that uses Google API v2
Here is a better example using V3 with form elements

http://www.geocodezip.com/montenegro_geocode_map.html...

good luck!

Data Display

Support

Maps

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post