[EXTENSION] jquery-gmap

Yii 1.1 Extensions
8

I tried that but the infowindows don’t pop up at all anymore.




Yii::import('ext.jquery-gmap.*');


$gmap = new EGmap3Widget();

$gmap->setSize(300, 400);


$options = new EGmap3MapOptions();

$options->draggable = true;

$options->mapTypeId = EGmap3MapTypeId::ROADMAP;

$options->zoom = 12;


$gmap->setOptions($options);







$marker = new EGmap3Marker(array(

    'title' => 'hello',

    'icon' => 'hxxp://google-maps-icons.googlecode.com/files/dolphins.png',

    

));




$marker->address = 'New York, NY';

$marker->data = 'Content of the infowindow';


$js = "function(marker, event, data){

        var map = $(this).gmap3('get'),

        infowindow = $(this).gmap3({action:'get', name:'infowindow'});

        if (infowindow){

            infowindow.open(map, marker);

            infowindow.setContent(data);

        } else {

            $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});

        }

}";


$js2 = "function(){

          var infowindow = $(this).gmap3({action:'get', name:'infowindow'});

          if (infowindow){

                infowindow.close();

          }

 }";


$marker->addEvent('mouseover', $js);

$marker->addEvent('mouseout', $js2);


$marker->centerOnMap();


$gmap->add($marker);




$gmap->renderMap();
9

There was indeed a bug in the extension’s PHP code, the ‘data’ property was not being passed properly to the Javascript object.

This has now been fixed, and a new version will be out shortly. Just need to do some more testing of other changes before releasing.

for reference, the following PHP code works properly on the fixed version :




$gmap = new EGmap3Widget();

$gmap->setSize(400, 400);


$options = new EGmap3MapOptions();

$options->disableDefaultUI = true;

$options->draggable = true;

$options->mapTypeId = EGmap3MapTypeId::ROADMAP;

$options->zoom = 15;

$options->center = array(0,0);

$gmap->setOptions($options);




$marker = new EGmap3Marker(array(

    'title' => 'hello',    

));

$marker->address = 'New York, NY';

$marker->data = 'The Big Apple';


$js = "function(marker, event, data){

        var map = $(this).gmap3('get'),

        infowindow = $(this).gmap3({action:'get', name:'infowindow'});

        if (infowindow){

            infowindow.open(map, marker);

            infowindow.setContent(data);

        } else {

            $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});

        }

}";


$js2 = "function(){

          var infowindow = $(this).gmap3({action:'get', name:'infowindow'});

          if (infowindow){

                infowindow.close();

          }

 }";


$marker->addEvent('mouseover', $js);

$marker->addEvent('mouseout', $js2);

$marker->centerOnMap();


$gmap->add($marker);


$gmap->renderMap();
10

I downloaded the updated version v1.5 but now that map fails to render, switching back to 1.4 works fine.

11

I got it to work – sorta. I found your fix in v1.5 and just added it to v1.4 and it works :) Thanks for putting this extension together, you’re my hero !

12

That’s not good :frowning: I hope this isn’t a major problem with the new version !!

Have you tried clearing out the assets folder when you upgraded the extension ? Because the javascript has been updated also.

13

I removed the v1.4 folder entirely from my project and then extracted the v1.5 into the extensions folder.

14

That would update the extension, but not clear out the assets used by it. Did you delete everything in your ‘assets’ folder ?

15

I’m a retard, I thought you were referring to the “/assets” folder in within the extension itself not the actual project’s “/assets” folder. After deleting everything in the folder v1.5 works for me.

Thanks

16

Hello All,

How can I get jquery-gmap created map object from JavaScript?

I need to trigger resize action after map is already created, but cant find how to get MAP:

[html]google.maps.event.trigger(MAP, "resize");[/html]

Thanks

17

I found the answer:

[html]mymap=$(’#yw0’).gmap3({action:‘get’, name:‘map’});[/html]

where #yw0 is jquery-gmap map index…

18

You can also set a specific id when the map is initialized :




$gmap = new EGmap3Widget();

$gmap->id = 'myCustomId';

This is generally better if you need to reference it later as the auto generated id can change.

19

THANK YOU.

Yes I discovered that already.

20

I want to apply custom styles for gmap.

For control options I add 2 styles to the mapTypeIds option like this:


$options->mapTypeId = EGmap3MapTypeId::SATELLITE;    

    $mapTypeControlOptions = new EGmap3MapTypeControlOptions;

    $mapTypeIds = array(EGmap3MapTypeId::ROADMAP, EGmap3MapTypeId::SATELLITE, EGmap3MapTypeId::TERRAIN, 'mystyle1', 'mystyle2');

    $mapTypeControlOptions->mapTypeIds = $mapTypeIds;

    $mapTypeControlOptions->style = EGmap3MapTypeControlStyle::DROPDOWN_MENU;

    $options->mapTypeControlOptions = $mapTypeControlOptions;

But cant figure out how to define and apply styles.

How I understand there is no way to do this in jquery-gmap, but maybe I can pas JavaScript something like with events:


$js = "function(marker, event, data){

        $('#House_gps_long').val(parseFloat(event.latLng.lng()).toFixed(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />); 

        $('#House_gps_lat').val(parseFloat(event.latLng.lat()).toFixed(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />);

}";

     $marker->addEvent('dragend', $js);
21

I’m not sure I understand. Do you mean the styled maps option of the js plugin ? http://gmap3.net/api/set-styled-map.html

22

Yes

23

At the present time, this feature is not implemented in the PHP interface. Work has started but is not finished.

You should be able to set the options through JS though, by accessing the map after creation.

24

Very nice and friendly extension.

Works like a charm!

Question: is it possible to define an ‘anchor point’ for a marker’s icon?

According to Google Maps documentation (google.maps.MarkerImage class):

"By default, the anchor is located along the center point of the bottom of the image"

But since I’m using a PNG image with semi-transparent glow / shadow, the icon appears to be ‘above’ the actual point in the map where it should be…

Also, when I add ‘polylines’ to link the Markers, the lines seem to come out of the ‘air’ instead of the Marker’s center.

I’d like to position the icon’s vertical and horizontal center at the marker’s coordinates. Any ideas?

25

Have you seen any Google documentation to that effect ?

26

Yes Ianaré, see below:

google.maps.MarkerImage class:

Constructor: MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)

anchor = Point : The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

(from code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage)

I don’tt know hoy to use this javascript code with the jquery-gmap extension (if possible), or if the extension already supports this.

27

This was relatively easiy to add, so here you go :




$marker = new EGmap3Marker(array(

    'title'=>'hello',

    'icon'=>array(

         'url'=>'http://google-maps-icons.googlecode.com/files/dolphins.png',

         'anchor'=> array('x'=>1,'y'=>36),

         //'anchor' => new EGmap3Point(5,5),

    )

));

This hasn’t been released yet though, get latest version from github …