Yii Framework Forum: [EXTENSION] jquery-gmap - Yii Framework Forum

Jump to content

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] jquery-gmap OO PHP interface to Google Maps with added functionality. Rate Topic: ***** 4 Votes

#1 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 15 April 2011 - 03:43 AM

This topic is for discussing all aspects of the jquery-gmap extension.
2

#2 User is offline   Maksold 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 25-April 11

Posted 26 April 2011 - 10:38 PM

Hello. Thanks for wonderful extensions. I have some problems, can you help me?
1) How set icon for markers?
2) How add events, like here(gmap3.net/api/add-markers.html)?
0

#3 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 04 May 2011 - 04:03 AM

View PostMaksold, on 26 April 2011 - 10:38 PM, said:

Hello. Thanks for wonderful extensions. I have some problems, can you help me?
1) How set icon for markers?
2) How add events, like here(gmap3.net/api/add-markers.html)?


1) Icon url can be passed to the marker options.

2) You can add events to markers, circles, etc simply by passing the event type and JS code to the addEvent or addEventOnce methods.

$marker = new EGmap3Marker(array(
    'title' => 'hello',
    'icon' => 'http://google-maps-icons.googlecode.com/files/dolphins.png',
));
$marker->address = 'Jacksonville, FL';
$marker->data = 'test data !';
$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}});
        }
}";
$marker->addEvent('click', $js);
$marker->centerOnMap();
$gmap->add($marker);

0

#4 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 22 May 2011 - 02:10 AM

Thank you for this awesome extension, amazing work!

How do I get it so that the InfoWindow's aren't open when the Map loads? I want it so that when I hover over a marker the corresponding infowindow pops up.
0

#5 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 22 May 2011 - 09:42 AM

View Postralz, on 22 May 2011 - 02:10 AM, said:

Thank you for this awesome extension, amazing work!

How do I get it so that the InfoWindow's aren't open when the Map loads? I want it so that when I hover over a marker the corresponding infowindow pops up.


You can use the code in my previous response, and change the event to 'mouseover' instead of 'click'.

A more PHP friendly way could be added in the future if enough people request this option ...
0

#6 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 22 May 2011 - 12:25 PM

I'm not very good at explaining my problems :)

I figured that I needed to use 'mouseover' instead of 'click' but that's not the problem. My problem is that when the map loads all the infowindows are already open and I want them to be closed when the map loads. Is there an option/setting that I need to set when I create an infowindow?


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

$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);

$infoWindow = new EGmap3InfoWindow(
    array('content'=>'New York Baby!',
          )
);


$marker = new EGmap3Marker(array(
    'title' => 'hello',
    'icon' => 'hxxp://google-maps-icons.googlecode.com/files/dolphins.png',
    
));

$marker->addInfoWindow($infoWindow);
$marker->address = 'New York, NY';

$js = "function(marker, event, data){
        var map = $(this).gmap3('get'),
        infowindow = $(this).gmap3({action:'get', name:'infowindow'});
        infowindow.open(map, marker);}";

$js2 = "function(marker, event, data){
        var map = $(this).gmap3('get'),
        infowindow = $(this).gmap3({action:'get', name:'infowindow'});
        infowindow.close();}";


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

$gmap->add($marker);

$gmap->renderMap();


0

#7 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 22 May 2011 - 01:51 PM

That's because you are first creating an infowindow through the PHP lib, then re-creating it on mouseover ... just remove the PHP infowindow and it should work.

The JS only infowindow content is taken from the marker's 'data' property ($marker->data).

Take a look at the JS on http://gmap3.net/api/add-markers.html you can essentially just pass it to the PHP marker object.

HTH
0

#8 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 22 May 2011 - 05:36 PM

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();


0

#9 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 23 May 2011 - 12:00 PM

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();

1

#10 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 26 May 2011 - 09:55 PM

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

#11 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 27 May 2011 - 12:27 AM

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 !
0

#12 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 27 May 2011 - 03:25 AM

View Postralz, on 27 May 2011 - 12:27 AM, said:

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 !

That's not good :-( 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.
0

#13 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 27 May 2011 - 10:39 AM

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

#14 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 27 May 2011 - 01:13 PM

View Postralz, on 27 May 2011 - 10:39 AM, said:

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

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

#15 User is offline   ralz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 22-May 11

Posted 28 May 2011 - 12:49 AM

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
0

#16 User is offline   tadas 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 03-June 11
  • Location:Lithuania

Posted 09 June 2011 - 04:08 AM

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:
google.maps.event.trigger(MAP, "resize");


Thanks
0

#17 User is offline   tadas 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 03-June 11
  • Location:Lithuania

Posted 09 June 2011 - 06:16 AM

View Posttadas, on 09 June 2011 - 04:08 AM, said:

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:
google.maps.event.trigger(MAP, "resize");


Thanks


I found the answer:
mymap=$('#yw0').gmap3({action:'get', name:'map'});


where #yw0 is jquery-gmap map index...
0

#18 User is offline   ianaré 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 05-November 10
  • Location:Terra (III in Sol system)

Posted 09 June 2011 - 01:06 PM

View Posttadas, on 09 June 2011 - 06:16 AM, said:

I found the answer:
mymap=$('#yw0').gmap3({action:'get', name:'map'});


where #yw0 is jquery-gmap map index...


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.
0

#19 User is offline   tadas 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 03-June 11
  • Location:Lithuania

Posted 10 June 2011 - 12:30 AM

View Postianaré, on 09 June 2011 - 01:06 PM, said:

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.


THANK YOU.
Yes I discovered that already.
0

#20 User is offline   tadas 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 03-June 11
  • Location:Lithuania

Posted 10 June 2011 - 12:39 AM

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(8)); 
        $('#House_gps_lat').val(parseFloat(event.latLng.lat()).toFixed(8));
}";
     $marker->addEvent('dragend', $js);

0

Share this topic:


  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users