and i insert inside a cunstom code in the element tab.It doesn 't work...where insert this code?Anybody can help me?thank you very much"> simple google map start to finish - Forums

Forums

ChronoForms v8 is now WordPress ready, v6 & v7 forms import is now supported, latest v8.0.29 release details

The JED needs volunteers!

simple google map start to finish

jo
jonnyblog1976 16 Nov, 2013
Hello,
i'm trying to insert a google map in a form but it don't work.
I'm using joomla 2.5 e chronoforms v4.
My idea is a page like this in html:


<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script>
function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
}


</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<button onclick="initialize()">Click me</button>


</body>
</html>


it create a simple google map when i click the button.
In chronoforms i use the Form Wizard and i drag a Custom Element from the Advanced Group into the Preview window. I open this action and paste this code there.

<div id="googleMap" style="width:500px;height:380px;"></div>
<button onclick="initialize()">Click me</button>


in the event tab i insert a Load JS in the on load section and put inside it this code

function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
}


now where insert this code?

src="http://maps.google.com/maps/api/js?sensor=false"


looking in the post i found this:


<?php
$doc =& JFactory::getDocument();
$doc->addScript("http://maps.google.com/maps/api/js?sensor=false");
?>

and i insert inside a cunstom code in the element tab.
It doesn 't work...
where insert this code?
Anybody can help me?
thank you very much
Max_admin 16 Nov, 2013
Hi,

Try to insert this:
<?php
$doc =& JFactory::getDocument();
$doc->addScript("http://maps.google.com/maps/api/js?sensor=false");
?>


Inside a "custom code" action under the "events" tab ?

But you should also open the form page source and check if everything is loaded, and make sure the "DOCTYPE" is matching because sometimes this causes problems, I have no experience with Google maps though.

Regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
jo
jonnyblog1976 21 Nov, 2013
Hi Max i found the problem, my site is on https connection, so the correct google maps api is: 
<?php
$doc =& JFactory::getDocument();
$doc->addScript("https://maps-api-ssl.google.com/maps/api/js?sensor=false");
?>
jo
jonnyblog1976 21 Nov, 2013
Thank you Max for the help.
For others who have the same problem inserting a map in the form:

1:in the element tab insert a Custom Element html/php with this code
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="button" value="map" onclick="initialize()">


2:in the Actions tab on load insert a custom code with
<?php
$doc =& JFactory::getDocument();
$doc->addScript("https://maps-api-ssl.google.com/maps/api/js?sensor=false");
?>


insert a Load JS with
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

insert a show html.

I used sample coordinates (51.508742,-0.12085).
Bye Jonny
Gr
GreyHead 21 Nov, 2013
Hi jonnyblog1976,

Your code looks OK to me but it might be possible to simplify or improve it a little. Is the Initialise button there just to load the form or does it do something else? How do you link the lat/long settings to the map display? Can they be changed in the form?

Bob
This topic is locked and no more replies can be posted.