Generate GMap with data

Posted by matman on 14-Oct-2014 07:26

Is it possible to generate a Google Map using my own fields? The location object attribute creates fields I don't need

Posted by jquerijero on 12-Jan-2015 16:44

Add the following to your page or sidebar code. The src includes an API KEY that you will need to get from Google. The forum is changing the src value to a link.

<script src='maps.google.com/.../js type='text/javascript'></script>

<script>

function renderGoogleMap(gaddress ) {

 var gOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }

 var gMap = new google.maps.Map(document.getElementById('gmap_div'), gOptions);

 var geocoder = new google.maps.Geocoder();

 if (geocoder) {

   geocoder.geocode({ address: gaddress }, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        gMap.setCenter(results[0].geometry.location);

        var marker = new google.maps.Marker({ map: gMap, position: results[0].geometry.location, visible:true });

      }

      else { document.getElementById('gmap_div').innerHTML='Error: '+status }});

 }

}

OnLoad event;

renderGoogleMap("address1,city,state,zip");

Using an HTML component;

create a div with ID=gmap_div.

All Replies

Posted by pvorobie on 14-Oct-2014 08:14

Yes, you can - use HTML Template Field or Script Component.

Posted by matman on 14-Oct-2014 08:50

So no Rollbase way?

Posted by matman on 14-Oct-2014 09:43

Doing it in a custom way seems to be rather hard. I cannot find a way to implement a Google Map succesfully. <style> tags in HTML components are deleted, empty <div> in HTML components are deleted. <script src="maps.google.com/.../js seems to go ignored, no matter when it's posted in a shared script component, a seperate script component, a document.write('<script src=".......cript>') or a $("#gmapscriptdiv").html('<script src=".....script>'). These last two are interpreted wrong, causing the script to output all script after the </script> as text.

Posted by Godfrey Sorita on 14-Oct-2014 10:08
Hi matman,

Have you tried using script component for your HTML and CSS code?


Regards,
Godfrey
Posted by romain.pennes@foederis.fr on 14-Oct-2014 10:08

Hello,

That is because you use a HTML component which automatically detects and deletes your script tags. Try with a Script Component and you won't have these problems.

Kind regards,

Romain

Posted by Godfrey Sorita on 20-Oct-2014 16:23
Were you able to move your code to the script component? Kindly let me know how it goes.
Posted by jquerijero on 12-Jan-2015 16:44

Add the following to your page or sidebar code. The src includes an API KEY that you will need to get from Google. The forum is changing the src value to a link.

<script src='maps.google.com/.../js type='text/javascript'></script>

<script>

function renderGoogleMap(gaddress ) {

 var gOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }

 var gMap = new google.maps.Map(document.getElementById('gmap_div'), gOptions);

 var geocoder = new google.maps.Geocoder();

 if (geocoder) {

   geocoder.geocode({ address: gaddress }, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        gMap.setCenter(results[0].geometry.location);

        var marker = new google.maps.Marker({ map: gMap, position: results[0].geometry.location, visible:true });

      }

      else { document.getElementById('gmap_div').innerHTML='Error: '+status }});

 }

}

OnLoad event;

renderGoogleMap("address1,city,state,zip");

Using an HTML component;

create a div with ID=gmap_div.

This thread is closed