EGMap 2.0 Google Maps Extension

Complete step for Autocomplete script that I include ()

Step 1: put the script on the EGMap extension

Step 2: Add this function on EGMap.php




public function addAutocomplete($inputId = null)

{

   

    if ($inputId === null)

      $autocomplete = new EGMapAutocomplete();

    else

      $autocomplete = new EGMapAutocomplete($inputId);


    $this->resources->add('autocomplete', new CTypedList('EGMapAutocomplete'));    

    $this->resources->itemAt('autocomplete')->add($autocomplete);

}

public function getAutocompleteJs()

{

    $return = '';

    if (null !== $this->resources->itemAt('autocomplete'))

    {

        foreach ($this->resources->itemAt('autocomplete') as $autocomplete)

        {

            $return .= $autocomplete->toJs($this->getJsName());

            $return .= "\n      ";

        }

    }

    return $return;

}



Step 4: Still in the EGMap.php find the function public function registerMapScript and add this line


$params .= '&libraries=places';

before




CGoogleApi::init();

and this line


$init_events[] = $this->getAutocompleteJs();

after the other $init_events[]

and to call the autocomplete… use this


$gMap->addAutocomplete();

You must have input field with id searchTextField or if you want customid just put it inside the


$gMap->addAutocomplete($customid);

*This script assumes you already have a default marker with info window.

You can still play with script base on your needs

How to get lat and lng of a drag able marker and show it at the info?

Is this correct way?


$dragevent = new EGMapEvent('dragend', '

function() {

          var pos = marker.getPosition();

       document.getElementById("lat").innerHTML = pos.lat();

       document.getElementById("lng").innerHTML = pos.lng();


        }

', false, EGMapEvent::TYPE_EVENT_DEFAULT);

$marker->addEvent($dragevent);

I am very sorry to everybody but i do not have much time nowadays…

The thing is that you need to initialize the map:




$gMap = new EGMap();

$gMap->setJsName('MYMAPID');

$gMap->setContainerId('MYMAPIDContainer');

$gMap->setWidth('100%');

$gMap->setHeight(308);


// plugins ------- if you wish plugins

$gMap->registerPlugin('EGMapInfoBox');

$gMap->registerPlugin('EGMapMarkerClusterer');

// end plugins ----


if (null !== $this->mapLatitude && null !== $this->mapLongitude)

	$gMap->setCenter($this->mapLatitude, $this->mapLongitude);

$gMap->zoom = $this->mapZoom;

   

// events?

$gMap->addEvent(new EGMapEvent('zoom_changed', 'search_map.info_window.close();'));


// CHECK HERE! I PUT THE METHOD init() of search.map object AFTER INIT TO BE CALLED

$gMap->renderMap(array('search_map.init();'));



As you can see we have to create that function that will have the markers and added to the map… remember the ID? the id above was MYMAPID. For example:




// THIS IS CREATED ON SERVER!!! THATS THE STRUCTURE FOR THE EXAMPLE

 var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];

var search_map = {

      init: function() {

            var infowindow = new google.maps.InfoWindow();


            var marker, i;


            for (i = 0; i < locations.length; i++) {  

                   marker = new google.maps.Marker({

                         position: new google.maps.LatLng(locations[i][1], locations[i][2]),

                         map: MYMAPID

                        });

                  // do you want a click event to the marker?

                 google.maps.event.addListener(marker, 'click', (function(marker, i) {

                        return function() {

                              infowindow.setContent(locations[i][0]);

                              infowindow.open(MYMAPID, marker);

                              }

                   })(marker, i));

             }

      }

};




Totally untested and sorry cuz i do not have time for anything else

Hi Antonio

Thanks for the fantastic extension.

I have had a problem with the map clusterer. When the map is 100% width and height, the clusters don’t seem to show or cluster properly.

The only solution I was able to find was to set a pixel width and height.

I was wondering if you had ever experienced this, or had any suggestions on how to fix the problem?

Thanks

Never had any issues at all related to the width or height of the map when using clustered markers. In fact, clustered markers I thought that has more to do with the zoom that with the dimensions of the map. First time heard of… what is happening? do you have any errors?

Hello,

thank you for your extension. I have two small problems.

  1. I was wondering how I can disable scroll wheel?

I would like prevent visitors of my site from scrolling a google map.

  1. How I can get an instance of a map (variable EGMap0).

I have a javascript function called getlocations() which is able to zoom a map to particular city. If I add this code right before </body> it does nothing bacause EGMap0 is null.


getlocations(EGMap0);

However, if I use this code everything works fine. But I assume that it is not a proper solution.


setTimeout("getlocations(EGMap0)", 2000);

The problem could be cause by


google.maps.event.addDomListener(window, "load",

EGMapContainer1_init);

It seems to be slow.

Thank you, Martin.

Hi,





1) I was wondering how I can disable scroll wheel?


I would like prevent visitors of my site from scrolling a google map.




Just add this line




$gMap->scrollwheel = false; 



Another question don’t know the answer.

Hi. I want create modal(popup) box after click link in window info but I can’t

Help me please…thx

Hi,

I have a problem with this epic extension!

When i render the map, the result have some graphicals glitches, in the uploaded image you can see…

Anyone knows why?

The code used is one of the examples codes. (i have tried the first 3 code snippets, and differents browsers: same result)

3117

temporary.jpg

UPDATE:

I see that there is a problem with the Bootstrap Extension.

I have modified the css of the bootstrap and putted the "max-weight" property of the "img" tag from "100%" to "300%" with the result that the glitches are solved in part.

Any definitive solution??

Another Question:

There is a way to get the zoom and/or position of an user map?

Example: I must reload the map to refresh the markers on it. But i dont want move the actual position/zoom of the user so i wanna get these parameters and initialize the new map with this parameters, to keep the map in the old position/zoom, is possible?

I have a similar problem.

The simplest solution is

<style>

#EGMapContainer1 img {

max-width: none;

}

</style>

WoW! Perfect Solution!

Thank you very Much

I had one more question related to EGMAP extension.

On one of the website I am building, after a few attempts to get the gecoded data, I get the error message saying that [status] => OVER_QUERY_LIMIT.

How can I increase the query limit size, so that I dont get such error messages.

I’m not sure the exact #'s. too many requests per day or too quickly. Try adding a 2 second sleep routine.

You can exceed the Google Maps API Web Services usage limits by:

Sending too many requests per day.


Sending requests too fast, i.e. too many requests per second.


Sending requests too fast for too long or otherwise abusing the web service.


Exceeding other usage limits, e.g. points per request in the Elevation API.

See this link:

https://developers.google.com/maps/documentation/business/articles/usage_limits

Thanks for the reply.

I researched a lot and found out that I need to add my domains Google API key.

However, I am not sure where to add that key on the extension.

I am only requesting 5 geo coordinates in 30 second, so am very much within limit, and as the website is in beta version, and not many users, it wouldnt have more than 200 hits per day. So, am not sure what is wrong.

I would like to use iFrame with EGMap, otherwise my css framework has some conflicts with map.

Can you guide me how to do that?

For example, here is a simple code for EGMap without any iframe. Currently I put it into my contacts.php and site/contacts render this page.

<?php

    Yii::import('application.extensions.EGMap.*');


     


    &#036;gMap = new EGMap();


    &#036;gMap-&gt;zoom = 18;


    &#036;mapTypeControlOptions = array(


      'position'=&gt; EGMapControlPosition::LEFT_BOTTOM,


      'style'=&gt;EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU


    );


     


    &#036;gMap-&gt;mapTypeControlOptions= &#036;mapTypeControlOptions;


    &#036;gMap-&gt;setCenter(56.959661, 24.102965);


    &#036;gMap-&gt;renderMap();


    ?&gt;

Hello everybody , i have a problem with this great extension .

I have one textfield and i want to type a value(address) like : Hasley 12 , New York and then find the cordinates.

My best idea its to implemented with json but i cannot find the solution . After all try to implemented with a form to type one location and then insert in a variable and then call

$geocoded_address = new EGMapGeocodedAddress($mylocation);

            &#036;geocoded_address-&gt;geocode(&#036;gMap-&gt;getGMapClient());


            &#036;location = new EGMapCoord(&#036;geocoded_address-&gt;getLat(), &#036;geocoded_address-&gt;getLng());


            &#036;gMap-&gt;setCenter(&#036;geocoded_address-&gt;getLat(), &#036;geocoded_address-&gt;getLng());

But my solution its not the best way .

Maybe all of this can works only with json but i cannot find it .

<?php

            Yii::import('application.extensions.EGMap.*');


            &#036;gMap = new EGMap();


            &#036;gMap-&gt;setWidth(690);


            &#036;gMap-&gt;setHeight(400);


            &#036;gMap-&gt;zoom = 8;


            &#036;gMap-&gt;mapTypeId = EGMap::TYPE_ROADMAP;





            &#036;home = new EGMapCoord(38.0843100, 23.8101081);

I want in $home insert my address in textfield and then with json find the coordinates .

I have 2 addresses . The second address creates from my attributes in database .

I saw the autocomplete but i dont know how fix this to set only the one address coordinates.

Thanks for your time !!!

Hi all!

I am using EGMap extension, which works fine until i needed to get coordinates from an given address.

I am using the example that is found on the extension page.

The next code is exactly the same code than the one in the documentation (reverse geocode), but the latitude and longitude which are returning is 0,0.




$gMap = new EGMap();

$gMap->setWidth(500);

$gMap->setHeight(400);

$gMap->zoom = 5;

 

$sample_address = 'Czech Republic, Prague, Olivova';

 

// Create geocoded address

$geocoded_address = new EGMapGeocodedAddress($sample_address);

$geocoded_address->geocode($gMap->getGMapClient());

 

// Center the map on geocoded address

 $gMap->setCenter($geocoded_address->getLat(), $geocoded_address->getLng());

 

// Add marker on geocoded address

$gMap->addMarker(

     new EGMapMarker($geocoded_address->getLat(), $geocoded_address->getLng())

);

 

$gMap->renderMap();



I tried changing the address, i am executing it with the Mozilla Firefox Console running and it is telling me NO errors.

So I can not figure out why is happening this…

Has anyone any idea about the reason of this problem?

I will really appreciate any suggestion!

Thank you very much!

Regards!

Hi Antonio,

can you tell me how to fix AddressSearchBox?

cheers!

How can I make the marker in the following code "global"?




function EGMapContainer0_init(){

  var mapOptions = {center:new google.maps.LatLng(52.444977, 13.2910249), zoom:15,   mapTypeId:google.maps.MapTypeId.ROADMAP};


  map = new google.maps.Map(document.getElementById("EGMapContainer0"), mapOptions);


  var EGMapMarker1 = new google.maps.Marker({map:map, position:new google.maps.LatLng(52.444977, 13.2910249), draggable:true});

} google.maps.event.addDomListener(window, "load", EGMapContainer0_init);



I’m asking that because I only have 1 marker on the map and I need to acces it, i.e. to use the setPosition() of this marker.

Cheers,

Dan