Change the map container #432

amsdamsgram · 2015-03-06T15:52:58Z

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 · 2015-03-06T17:19:19Z

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

wf9a5m75 · 2015-03-08T00:29:36Z

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>

wf9a5m75 · 2015-03-11T00:32:28Z

@iDams Any updates?

amsdamsgram · 2015-03-11T20:07:15Z

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?

… developer forgot to call setDiv(null)

…tring #427, #432

wf9a5m75 · 2015-03-11T21:52:24Z

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>

amsdamsgram · 2015-03-12T13:28:52Z

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

amsdamsgram · 2015-03-12T18:47:11Z

@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 · 2015-03-12T18:50:07Z

"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 · 2015-03-12T18:52:05Z

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 · 2015-03-12T18:53:16Z

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

wf9a5m75 · 2015-03-12T18:56:55Z

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 · 2015-03-12T18:59:17Z

And also setDiv, you are right.

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

amsdamsgram · 2015-03-12T19:00:49Z

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 · 2015-03-12T19:01:10Z

ok, I'll check it too.

wf9a5m75 · 2015-03-12T22:51:31Z

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 · 2015-03-13T14:08:48Z

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 · 2015-03-13T16:41:41Z

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 · 2015-03-13T21:50:06Z

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 · 2015-03-13T21:56:10Z

Did you try my example code?

amsdamsgram · 2015-03-16T17:16:17Z

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 · 2015-03-16T18:04:37Z

Your css is incorrect. #map_canvas1 blocks #map_canvas2.

amsdamsgram · 2015-03-16T19:14:57Z

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 · 2015-03-16T19:22:22Z

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 · 2015-03-17T20:37:26Z

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 · 2015-03-17T20:44:50Z

👍

wf9a5m75 added the need more information label Mar 8, 2015

wf9a5m75 added a commit that referenced this issue Mar 11, 2015

Patch for #432, and modified the code of getMap() and setDiv() if the…

99de23c

… developer forgot to call setDiv(null)

wf9a5m75 added a commit that referenced this issue Mar 11, 2015

Use base64EncodedStringWithSeparateLine instead of cdv_base64EncodedS…

1ce0fa9

…tring #427, #432

wf9a5m75 added bug and removed need more information labels Mar 11, 2015

wf9a5m75 added this to the v1.2.5 milestone Mar 11, 2015

wf9a5m75 closed this as completed Mar 12, 2015

hirbod mentioned this issue Sep 30, 2015

Map does not change DIV container with map.setDiv(div) #655

Closed

This was referenced Nov 15, 2015

How do I reuse a map in multiple map divs? #728

Closed

Reuse Multiple Maps as a Service #720

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change the map container #432

Change the map container #432

amsdamsgram commented Mar 6, 2015

wf9a5m75 commented Mar 6, 2015

wf9a5m75 commented Mar 8, 2015

wf9a5m75 commented Mar 11, 2015

amsdamsgram commented Mar 11, 2015

wf9a5m75 commented Mar 11, 2015

amsdamsgram commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 13, 2015

wf9a5m75 commented Mar 13, 2015

amsdamsgram commented Mar 13, 2015

wf9a5m75 commented Mar 13, 2015

amsdamsgram commented Mar 16, 2015

wf9a5m75 commented Mar 16, 2015

amsdamsgram commented Mar 16, 2015

wf9a5m75 commented Mar 16, 2015

amsdamsgram commented Mar 17, 2015

wf9a5m75 commented Mar 17, 2015

Change the map container #432

Change the map container #432

Comments

amsdamsgram commented Mar 6, 2015

wf9a5m75 commented Mar 6, 2015

wf9a5m75 commented Mar 8, 2015

wf9a5m75 commented Mar 11, 2015

amsdamsgram commented Mar 11, 2015

wf9a5m75 commented Mar 11, 2015

amsdamsgram commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

wf9a5m75 commented Mar 12, 2015

amsdamsgram commented Mar 13, 2015

wf9a5m75 commented Mar 13, 2015

amsdamsgram commented Mar 13, 2015

wf9a5m75 commented Mar 13, 2015

amsdamsgram commented Mar 16, 2015

wf9a5m75 commented Mar 16, 2015

amsdamsgram commented Mar 16, 2015

wf9a5m75 commented Mar 16, 2015

amsdamsgram commented Mar 17, 2015

wf9a5m75 commented Mar 17, 2015