How put Number into GPS Marker?

Partenaire · Post by **Partenaire** » Tue Nov 18, 2014 10:22 am

Hi alls,
my goal:
get a maker with number when i display a map (with googlemap) on my desktop Browser

Actually
I use revBrowser to display a map with maker, work fin. For that i use the code i use a html script from Livecode Forum To Bangkok.

After this code i have a nice map with maker without number.

Code: Select all

 --- here my data, name of the marker and geocode of the marker, one per line
   local leNom,lesCoordonnees
   repeat for each line K in theKeys
      
      put aTraiter[K]["nom"] into leNom
      put aTraiter[K]["adresse"] into lescoordonnees
      --initialisation du MARKER
      put "var latlngPos"&K&" = new google.maps.LatLng("&lesCoordonnees&");"&cr after lesData1
      put "var marker = new google.maps.Marker({"&cr after lesData2
      put "position: latlngPos"&K&","&cr after lesData2
      put " map: map,"&cr after lesData2
      put "title: "&quote&leNom&quote&"});"&cr after lesData2

the result after the replace [DATA1] and [DATA2] into the original html

Code: Select all

<!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" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>PC Pro - Google Maps Simple Example</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>   
   <script type="text/javascript">
      $(document).ready(function () {
         // Define the latitude and longitude positions
var latlngPos1 = new google.maps.LatLng(47.1199293,-1.9494228);
var latlngPos2 = new google.maps.LatLng(47.2290109,-2.1750371);
var latlngPos3 = new google.maps.LatLng(47.2764510,-1.7805900);


         // Set up options for the Google map
         var myOptions = {
zoom: 10,
            center: latlngPos1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         // Define the map
         map = new google.maps.Map(document.getElementById("map"), myOptions);
         // Add the marker
var marker = new google.maps.Marker({
position: latlngPos1,
 map: map,
title: "Nom 1‘l"});
var marker = new google.maps.Marker({
position: latlngPos2,
 map: map,
title: "Nom 2"});
var marker = new google.maps.Marker({
position: latlngPos3,
 map: map,
title: "NOM 3"});


      });
   </script>
</head>
<body>
   <div id="map" style="width:1200px;height:650px;margin-top:10px;"></div>
</body>
</html>

Is it possible to put label or number using param maker "icon" or "zindex"?

Thank you

Have a nice day

SparkOut · Post by **SparkOut** » Tue Nov 18, 2014 11:46 am

How to create a marker with label is described in this link http://google-maps-utility-library-v3.g ... mples.html

You will need to ensure the markerwithlabel.js code is included as mentioned at the top of that page. You can change the style as you see fit in the static css block you would add to the template page. You would need to alter your code to create the marker with the new MarkerWithLabel command not new Marker. The anchor point would depend slightly on how wide your label box is - the coordinates provided in the first example of 22,0 are to have the label centred under the marker, given that the border is 2 pixels and the width of the box is 40, the total width of the box is therefore 44 pixels including the border at both sides, so 22 is 50% along the x axis. setting the y coordinate to 0 puts the top of the box at the bottom of the marker.

Partenaire · Post by **Partenaire** » Tue Nov 18, 2014 2:16 pm

HI SparkOut,

Thank you , i take a look and go back. I think it will be very interesting to do that without images.

At the moment i find a way for my goal to read this post on stackoverfloat http://stackoverflow.com/questions/2436 ... le-maps-v3

After add this in my code and download a markers pictures on my desktop that work...

Code: Select all

---here the path of images folder 
put "var image"&K&"  = "&quote&tPathMaker&"marker"&K&".png"&quote&";" & cr after lesData2
      --put "new google.maps.Size(20, 34),new google.maps.Point(0, 0),new google.maps.Point(10, 34));"&cr after lesData2
      put "var marker = new google.maps.Marker({"&cr after lesData2
      --neww
      
      --- 
      put "position: latlngPos"&K&","&cr after lesData2
      put " map: map,"&cr after lesData2
      put "icon: image"&K&","&cr after lesData2
      put "title: "&quote&leNom&quote&"});"&cr after lesData2

I add to a new var "lesdata3" with the list of contact. When [DATA3] is replace by "lesdata3" in the core text html, i have my ist of contact under the map... Cool

and after to print map, i just need launch the file.

Eric

LiveCode Forums

How put Number into GPS Marker?

How put Number into GPS Marker?

Re: How put Number into GPS Marker?

Re: How put Number into GPS Marker?