amsdamsgram commented 9 years ago

Hi,

I'm having some issue to change the map container. I have one main map which is working fine. But at some point I want to display a map thumbnail.

I do this:

this.map.setDiv(container); this.map.clear(); this.map.refreshLayout();

But the map is not showing. Is there something I forgot? Also, the container seems to be right because the parent elements of the new container become transparent. I tried to do a setBackgroundColor('white') but it's still transparent.

wf9a5m75 commented 9 years ago

Is there any error message in Logcat or Xcode? Have you checked your JS error using Chrome Inspector or Safari?

wf9a5m75 commented 9 years ago

I tested a simple code, but there was no error at all. The below code works both on Android and iOS

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta charset="utf-8" />
    <title>Google Maps Plugin for Cordova</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    document.addEventListener('deviceready', function() {
      var divs = [];
      divs[0] = document.getElementById("map_canvas1");
      divs[1] = document.getElementById("map_canvas2");

      var map = plugin.google.maps.Map.getMap(divs[0]);
      map.on(plugin.google.maps.event.MAP_READY, function() {

        var idx = 0;
        var button = document.getElementById("button");
        button.addEventListener("click", function() {
          var divIdx = ++idx % 2;
          map.setDiv(divs[divIdx]);
        });

      });
    });
    </script>
    <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map_canvas1 {
      margin: 5%;
      width: 90%;
      height: 40%;
      padding: 0;
      border: 1px solid red;
    }
    #map_canvas2 {
      margin: 5%;
      width: 90%;
      height: 40%;
      padding: 0;
      border: 1px solid green;
    }
    </style>
  </head>
  <body>
    <div id="map_canvas1" ></div>
    <button id="button">↑ Swap ↓</button>
    <div id="map_canvas2" ></div>
  </body>
</html>

capture

wf9a5m75 commented 9 years ago

@iDams Any updates?

amsdamsgram commented 9 years ago

Hi,

Yes, this is what I'm trying to do when I need map2:

I saved the map1 options (center/zoom)
I replace the map1 by an image using map.toDataUrl()

But apparently, the image is the reason why I don't see map2. If I don't put an image for map1, map2 is working fine. Do you see a reason why it's not working with the image?

In your example, when you switch, if you put an image of the map, is it working?

wf9a5m75 commented 9 years ago

All right, the problem was the encoded strings include the break line characters. Now, the test branch code works like the below image.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta charset="utf-8" />
    <title>Google Maps Plugin for Cordova</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    document.addEventListener('deviceready', function() {
      var divs = [];
      divs[0] = document.getElementById("map_canvas1");
      divs[1] = document.getElementById("map_canvas2");

      var map = plugin.google.maps.Map.getMap(divs[0]);
      map.on(plugin.google.maps.event.MAP_READY, function() {

        var idx = 0;
        var button = document.getElementById("button");
        button.addEventListener("click", function() {
          var divIdx = idx % 2;

          map.toDataURL(function(imageData) {
            divs[divIdx].style.backgroundImage = "url(" + imageData + ")";

            map.setDiv(divs[++idx % 2]);
          });
        });

      });
    });
    </script>
    <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map_canvas1 {
      margin: 5%;
      width: 90%;
      height: 40%;
      padding: 0;
      border: 1px solid red;
    }
    #map_canvas2 {
      margin: 5%;
      width: 90%;
      height: 40%;
      padding: 0;
      border: 1px solid green;
    }
    </style>
  </head>
  <body>
    <div id="map_canvas1" ></div>
    <button id="button">↑ Swap ↓</button>
    <div id="map_canvas2" ></div>
  </body>
</html>

issue_432

amsdamsgram commented 9 years ago

Ok thanks! I'm going to try with the new test branch.

amsdamsgram commented 9 years ago

@wf9a5m75 Hmm... Are you sure the test branch is working?

I had these three errors:

Error on map.h: the import of "NSData+Base64.h" was not the good path
Error with isHTMLColorString: inputValue is looking like {"url":"www/img/marker_rtpush_2.png","size":{"width":15,"height":15}} but it considered it a string
Error in the setDiv function L705, it should be currentDiv.className, not div.className no?

I corrected all of these but it's still not working for me... When I use the image for map1, map2 is still not there :/

wf9a5m75 commented 9 years ago

"NSData-Base64/NSData+Base64.h" is this file. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/test/src/ios/GoogleMaps/NSData-Base64/NSData%2BBase64.h

amsdamsgram commented 9 years ago

Yeah but when I build, there is an error saying it can't find the file. In other file, you just do something like this: #import "NSData+Base64.h"

wf9a5m75 commented 9 years ago

No. If I write "NSData+Base64.h", Xcode use cordova's one.

wf9a5m75 commented 9 years ago

Regarding of 'isHTMLColorString', thanks for good pointing. Add typeof inputValue !== "string" at the first if statement.

function isHTMLColorString(inputValue) {
  if (!inputValue || typeof inputValue !== "string") {
    return false;
  }
  ...

wf9a5m75 commented 9 years ago

And also setDiv, you are right.

I already fixed the code of the googlemaps-cdv-plugin.js file in the test branch.

amsdamsgram commented 9 years ago

Ok thanks.

I'm trying to figure out why #import "NSData-Base64/NSData+Base64.h" is not working for me. I have this error when building:

fatal error: 'NSData-Base64/NSData+Base64.h' file not found

import "NSData-Base64/NSData+Base64.h"

wf9a5m75 commented 9 years ago

ok, I'll check it too.

wf9a5m75 commented 9 years ago

I tested buiding from command line, but I didn't face any error.

Is there NSData-Base64 folder in the platforms/ios/(your app)/plugins/plugin.google.maps/? The folder should exists because I defined in the plugin.xml https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/test/plugin.xml#L150

If no, download from here https://github.com/wf9a5m75/phonegap-googlemaps-plugin/tree/test/src/ios/GoogleMaps/NSData-Base64

amsdamsgram commented 9 years ago

I just checked platforms/ios/(my app)/plugins/plugin.google.maps/ and I do have the NSData+Base64.* files but they are not in a folder, they are at the root with all the other files of the plugin. I used the PhoneGap Usage to install your plugin, maybe it makes a difference?

So if I use #import "NSData+Base64.h", Xcode is going to use Cordova file not yours? It would explain why with this import, map2 is still not working.

wf9a5m75 commented 9 years ago

Ah, I just remember that the plugman (that is used Cordova and Phonegap internally) does not make directory since Cordova 3.3 or 3.4. So, yes, you are right. I need to specify #include "NSData+Base64.h". I changed the map.h file. Try again please.

amsdamsgram commented 9 years ago

Hi,

It's still not working. When I try to switch on map2, parents of the container get transparent even if I do a setBackgroundColor('white') and the map2 doesn't appear. Without using the image for map1, map2 is working fine.

The weird part is if manually I remove the image of map1 in the JavaScript console like this: $('.mapimg').remove(); Map2 is showing right away.

wf9a5m75 commented 9 years ago

Did you try my example code?

amsdamsgram commented 9 years ago

Hi,

Your example is working. So I modified your example a little bit to look like my situation to see if it was still working but it's not.

This is the modified version of your example:

<style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas1 {
  margin: 5%;
  width: 90%;
  height: 90%;
  padding: 0;
  border: 1px solid red;
  position: relative;
}
#map_canvas2 {
  margin: 5%;
  width: 90%;
  height: 40%;
  padding: 0;
  border: 1px solid green;
  position: absolute;
  top: 10px;
}
#button{
  position: absolute;
  bottom: 10px;
}
</style>
<div id="map_canvas1" ></div>
<div id="map_canvas2" ></div>
<button id="button">↑ Swap ↓</button>

Basically, I added position absolute for map2 and put it on top of map1. This is looking more like my application. And it's not working for me with this example. Map2 is not showing. So maybe it is because of the position absolute?

wf9a5m75 commented 9 years ago

Your css is incorrect. #map_canvas1 blocks #map_canvas2. screen shot 2015-03-16 at 10 49 18 am

amsdamsgram commented 9 years ago

What do you mean by it's incorrect? I can't have absolute elements? Because this is what my application looks like:

A main map taking all the screen
Informations on top on of the main

When these informations appears, this is when I need to put an image on the main map et display a mini map with these informations.

wf9a5m75 commented 9 years ago

Do you understand how this plugin display the map? The map view is not HTML element. The map view places under the browser. In order to display the map, html elements above the map MUST BE transparent.

The CSS you modified my example is that the #map_canvas1 covers almost full cover. I think this is your main map, isn't it? And the second map (#map_canvas2) is located on the #map_canvas1. This is the problem.

When you set the background image to #map_canvas1, it is not transparent anymore. The native google maps view is located exactly the same position of #map_canvas2, but under the browser view (it means under the <body> tag).

You can use position:absolute, but you can not display the map_canvas2 over the map_canvas1. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Map#how-does-the-plugin-work

amsdamsgram commented 9 years ago

Hmm ok I get it.

It's not possible to do what I want then. So I decided to use images of the map for my map2 and it's working fine. Thanks!

wf9a5m75 commented 9 years ago

:+1:

mapsplugin / cordova-plugin-googlemaps

Change the map container #432

import "NSData-Base64/NSData+Base64.h"