ThinkGeo.com    |     Documentation    |     Premium Support

How to create same markers functionality as in Google map search results?

#1

Hi there,


Greetings!


I am working on a web application which shows search results on the map as well as on a table left to the map similar to google maps. Once an entry e.g. A: Tera Drill Ltd  is clicked the marker corresponding to A shows the info window ( Please see the attached image). Please let me know how can we achieve similar functionality with Markers in ThinkGeo.  This functionality is critical to our application as our web application acts as a search engine for oil and gas industry users.


Thanks,


Nand


 




#2

Hi, Nand,



You could achieve this functionality in our WebEdition product with ease. You could refer to the code in the attachment.



Please feel free to let us know if you have more queries. 



Thanks,

Khalil



1850-AddAPopup.zip (2.77 KB)

#3

Hi Khalil,



Thanks for your reply and attached code. This code will work well if a user clicks on marker itself on the map. However, in my case, the user should be able to click on any item in the search results  to see a pop up window displayed right at the marker on the map. Here, in the image attached, user is not clicking on the map but he is clicking on the text hyperlink  "Terra Drill Ltd'  and as a results a pop up info windows comes at the location of the marker. We could achieve same functionality using google APIs (marker.openInfoWindowHtml...) but not sure how to achieve this using MapSuite.  Please let me know if you need more information.


 


Javascript APIs can be very useful for the web mapping development. I found this link for ThinkGeo Mapsuite Javascript APIs : gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/12/aft/5616/afv/topic/Default.aspx. Please let me know if there are more javascript functions available. If yes, please direct me to the appropriate link.


 


Thank you so much.


 


Regards,


Nand



 



#4

Hi, Nand



Yes, we could implement this using MapSuite. Once you get the all markers in client-side, you could use the showPopup method of marker to show the pop-up you have defined on the marker. You could refer the code below:



        var OnMapCreated = function(map) {

            var markerLayer = map.getLayer('MarkerOverlay');

            for (i in markerLayer.markers) {

                var marker = markerLayer.markers;

                if (marker.CLASS_NAME == "OpenLayers.Marker.GeoMarker") {

                    markerLayer.markers.showPopup();

                } 

            }

        }


Thanks,


Khalil



#5

Hi Khalil, 
  
 Thanks for your reply. 
  
 I was able to get this functionality by using following code in the onclick event of the result set. 
 Map1.GetOpenLayersMap().popups[i-1].show(); 
  
 I have one more question. Is it possible to have some dynamic text inside the web image of marker? This functionality is also available in Google maps. Please see the attached image in the first post as text ‘A’ is appearing in the marker for Tera Drill Ltd. I have seen similar  functionality when we use ‘Iconstyle’ in MapSuite for the labeling. I am creating markers at the server side.  
  
 Thanks a lot! 
  
 Regards, 
 Nand

#6

 


Nand,
 
The text property can be available in client, and allow us to change the marker text on the fly. Please try the code below:
 var OnMapCreated = function(map) {
            var markerLayer = map.getLayer('MarkerOverlay');
            for (var i in markerLayer.markers) {
                var marker = markerLayer.markers;
                if (marker.CLASS_NAME == "OpenLayers.Marker.GeoMarker") {
                    marker.showPopup();
                    marker.text = "Dynamic Text";
                }
            }
        } 
Thanks,
 
Johnny,