Forum | Appery.io

Hello! On button "Show Warrington, Karitane" you run Custom JS where you create new map. You don't need to recreate map. Try to run next JS code:

//get map
var map = Tiggr('googlemap1');
map.options['address']='';
map.refresh();

var myOptions = {
zoom :10,
center: new google.maps.LatLng(-45.67, 170.63),
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map.options['latitude'] = -45.67;
map.options['longitude'] = 170.63;
map.options['zoom'] = 10;
map.gmap.mapTypeId = google.maps.MapTypeId.SATELLITE;
map.refresh();
//Karitane
var sfLatlng = new google.maps.LatLng(-45.641648, 170.657301);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map.gmap,
title: "Karitane"
});

//Warrington
var sjLatlng = new google.maps.LatLng(-45.709895, 170.594473);
var marker = new google.maps.Marker({
position: sjLatlng,
map: map.gmap,
title: "Warrington"
});

Also be aware that in your App you were working with map: map (it's just a wrapper). You should work with map: map.gmap.

Marina -

Thanks very much!

I want to be able to call a REST API (parse.com) and use the results to set map markers.

The problem I was having is that the above code by Max (see first reply) works like a charm (thanks!). The issue is that is for a few fixed locations.

Normally, when I create a REST service (graphically in Tiggzi), I can do a direct mapping of the outputs in the Data Mapping section of Tiggzi - but this doesn't seem to work correctly as no extra map markers are created.

Any suggestions on how to best populate markers on a map from a parse.com GET?

Could you please send us a screenshot of your mapping?

Sent via email... I think that the problem is that I'm trying to map a collection returned by the REST API call into a Google Map component (assuming that markers would be replicated) - I don't think that this is supported.

Assuming that to be the case, how would you handle a return of a collection of data (let's say businesses and their locations) and map these into additional markers for the map component?

Hi Haim, were you able to get this done?

Hi Haim,

To display multiple marks on a google map you must follow next step:
Assume you have Rest service which returns array of coordinates.

1. Add JavaScript function in mapping UI

2. Map array of response data to your JavaScript function (as on attached screenshot)

   

3. Add following code to javascript function

   code
   googleMapDiv = Tiggzi("googleMap").get(0);
   $googleMapDiv = $(googleMapDiv);
   mapWidth = $googleMapDiv.width();
   mapHeight = $googleMapDiv.height();

   /Adjust zoom to cover all marks/
   function log2(m) {
   return ((Math.log(m)) / (Math.log(2)));
   };
   var maxLatitude = -90,
   minLatitude = 90,
   maxLongitude = -180,
   minLongitude = 180,
   location, widthForZoom0 = 256,
   /map width/height = 256px for zoom = 0/
   mapWidth, mapHeight, mapDivZoom, mapZoom, resultZoom, googleMapDiv, $googleMapDiv, mapOptions, map, i, sfLatlng, marker;
   for (i = 0; i < value&#46;length; i++) {
   location = value['location'];
   maxLatitude = location['latitude'] > maxLatitude ? location['latitude'] : maxLatitude;
   minLatitude = location['latitude'] < minLatitude ? location['latitude'] : minLatitude;
   maxLongitude = location['longitude'] > maxLongitude ? location['longitude'] : maxLongitude;
   minLongitude = location['longitude'] < minLongitude ? location['longitude'] : minLongitude;
   };
   mapZoom = log2(1 &#47; Math&#46;max(Math&#46;abs((maxLatitude - minLatitude) &#47; 180), Math&#46;abs((maxLongitude - minLongitude) &#47; 360))); &#47;zoom for current map piece&#47;
   mapDivZoom = log2(Math&#46;min(mapWidth, mapHeight) &#47; widthForZoom0); &#47;zoom for current size of map div&#47;
   resultZoom = Math&#46;floor(mapDivZoom + mapZoom); &#47;result map zoom&#47;
   if (resultZoom > 15) {
   resultZoom = 15;
   }
   if (resultZoom < 0) {
   resultZoom = 0;
   }
   mapOptions = {
   zoom: resultZoom,
   center: new google&#46;maps&#46;LatLng((maxLatitude + minLatitude) &#47; 2, (maxLongitude + minLongitude) &#47; 2),
   mapTypeId: google&#46;maps&#46;MapTypeId&#46;ROADMAP
   };
   
   &#47;Add marks to screen&#47;
   map = new google&#46;maps&#46;Map(googleMapDiv, mapOptions);
   for (i = 0; i < value&#46;length; i++) {
   sfLatlng = new google&#46;maps&#46;LatLng(value['location']['latitude'], value['location']['longitude']);
   marker = new google&#46;maps&#46;Marker({
   position: sfLatlng,
   map: map
   });
   };
   
   /code

There is a known bug affecting the Google Map markers:

http://code.google.com/p/google-maps-...

Basically, the markers disappear once I zoom in enough (using two fingers) because of the event called.

Is there a way via Tiggzi to apply the -webkit-transform: translateZ(0px) to the marker wrappers?

Hello,
yes, you can use JavaScript to do this.

Hi Katya,

I have tried your above code for adding map points via REST.
However, upon navigation to the map page, after the REST is loaded, the page goes all white and there is an endless wait icon (basically, it looks like the app crashed).

Your assistance is appreciated, as I have tried everything I can think of and still I can not seem to get this to work.

(I am testing this with an Android - Samsung Galaxy III)

I have made the below public:
http://project.tiggzi.com/mobile-fram...