Page 1 of 3

Popup on Google Map icons

Posted: Tue May 20, 2014 9:46 pm
by Jai Singh

I am using following Javascript to show custom icons a various location on Google Maps
var sfLatlng = new google.maps.LatLng(currentLat, currentLng);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
icon: "http://i.imgur.com/QtWkT.png"
});

What I want is to be able to show a popup with some details when I click on the icon. Is there a way to do that? BTW, there will be multiple icons on the map.


Popup on Google Map icons

Posted: Tue May 20, 2014 10:15 pm
by Yurii Orishchuk

Hello Jai.

You can use following code:

precode

//Create infowindow.
var infowindow = new google.maps.InfoWindow({
content: '<div style="height:80px;">test content<>',
maxWidth: 320
});

Code: Select all

 var CreateMarker = function(data){ 
     var marker = new google&#46;maps&#46;Marker({ 
         position: new google&#46;maps&#46;LatLng(data&#46;lat, data&#46;long), 
         map: map, 
         draggable: true, 

         icon: "http:&#47;&#47;i&#46;imgur&#46;com/QtWkT&#46;png", 

         title: data&#46;location 
     }); 

     &#47;&#47;Add event handler and open infoWindow 
     google&#46;maps&#46;event&#46;addListener(marker, 'click', function() { 
         &#47;&#47;Set content for infowindow&#46; 
         infowindow&#46;setContent('<div style="height:80px;">Content of + ' + data&#46;location + '<>'); 

         &#47;&#47;Open infowindow&#46; 
         infowindow&#46;open(map, marker); 
     }); 
 }; 

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/code/pre

As you can see you can fill map by markers with this function:

precode

&#47;&#47;Where you need to pass object with "lat", "long" and "location" fields&#46; Location - just a text that's you need to display on click&#46;
CreateMarker({lat: locationHelper&#46;aLocations[0], long: locationHelper&#46;aLocations[1], location: locationHelper&#46;aLocations[2]});

/code/pre

Regards.


Popup on Google Map icons

Posted: Wed May 21, 2014 8:57 pm
by Jai Singh

Thanks Yurii. That works! However, the popup stays static at one spot. Anyway to get it over the marker?


Popup on Google Map icons

Posted: Wed May 21, 2014 11:22 pm
by Yurii Orishchuk

Hello Jai.

Not sure i have correctly understood your question.

Your popup will be over all other markers.

See details: http://prntscr.com/3ldqhu/direct

So please describe your problem in details and attach screen shots where we can see it.

Thanks & regards.


Popup on Google Map icons

Posted: Fri May 23, 2014 4:49 am
by Jai Singh

Your code works fine. It's something on my side. I should be able to figure out. Thanks.


Popup on Google Map icons

Posted: Tue Jul 15, 2014 7:00 am
by Alex GG

Hi Yurii,

I want to follow your procedure to open an info window on a map with multiple icons, but I also need that when user taps on the window, it redirects to a detail page, how to implement this?

Regards.


Popup on Google Map icons

Posted: Tue Jul 15, 2014 11:25 pm
by Yurii Orishchuk

Hi Alex,

You need to add info window binding "click" event.

So you can use following code instead of code we have provided above.

pre

Code: Select all

 &#47;&#47;Were "multiGoogleMap" is map component name&#46; 
 var map = Appery("multiGoogleMap")&#46;options&#46;mapElement&#46;gmap('get', 'map'); 

&#47;&#47;Create infowindow&#46;
var infowindow = new google&#46;maps&#46;InfoWindow({
content: 'test content',
maxWidth: 320
});

Code: Select all

 self&#46;infowindowa = infowindow; 

 var CreateMarker = function(data){ 
     var marker = new google&#46;maps&#46;Marker({ 
         position: new google&#46;maps&#46;LatLng(data&#46;lat, data&#46;long), 
         map: map, 
         draggable: true, 

         icon: "http:&#47;&#47;i&#46;imgur&#46;com/QtWkT&#46;png", 

         title: data&#46;location 
     }); 

     &#47;&#47;Add event handler and open infoWindow 
     google&#46;maps&#46;event&#46;addListener(marker, 'click', function() { 

         &#47;&#47;Set content for infowindow&#46; 
         infowindow&#46;setContent('Content of + ' + data&#46;location + ''); 

         &#47;&#47;Open infowindow&#46; 
         infowindow&#46;open(map, marker); 

         &#47;&#47;Added coded&#46; 
         google&#46;maps&#46;event&#46;addListener(infowindow, 'domready', function() { 
             var infoWindowCountent = jQuery("&#46;infoWindowCountent:visible"); 

             var infoWindowElement = infoWindowCountent&#46;parent()&#46;parent()&#46;parent(); 

             var onClick = function(){ 
                 &#47;&#47;You can add some other actions on click&#46; 

                 &#47;&#47;Note you need replace "start2" with page name you need navigate to&#46; 
                 Apperyio&#46;navigateTo("start2"); 
             }; 
             infoWindowElement&#46;bind("click", onClick); 
         }); 

     }); 
 }; 

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/pre

Regarsd.


Popup on Google Map icons

Posted: Fri Oct 24, 2014 4:10 am
by sebastian

I'm having a little issue with this as well. I managed to get the the text box and custom image but I'm having issues with adding a database string in the text box of the clicked marker. Where it says $a.storage["selected_test_storage"].get("$['Name']") + data.location It give me the first value of the column "Name". How can I get "Name" to give the correct name?

var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));

var infowindow = new google.maps.InfoWindow({
content: 'test content',
maxWidth: 320
});
self.infowindowa = infowindow;

var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: data.results[0].address_components[0].long_name,
animation: google.maps.Animation.DROP
});

bounds.extend(markerLatLng);
map.fitBounds(bounds);

google.maps.event.addListener(marker, 'click', function() {
//Set content for infowindow.

Code: Select all

      infowindow.setContent('Content of  ' + data.results[0].address_components[0].long_name +'  ' + $a.storage["selected_test_storage"].get("$['Name']") ); 

         //Open infowindow. 
         infowindow.open(map, marker); 
         //Added coded. 
         google.maps.event.addListener(infowindow, 'domready', function() { 
             var infoWindowCountent = jQuery(".infoWindowCountent:visible"); 
             var infoWindowElement = infoWindowCountent.parent().parent().parent(); 
             var onClick = function(){ 
                 //You can add some other actions on click. 
                 //Note you need replace "start2" with page name you need navigate to. 

                 Apperyio.navigateTo("start2"); 
             }; 
             infoWindowElement.bind("click", onClick); 
         }); 
     }); 

 for (var i = 0; i < locationHelper.aLocations.length; i++) 
     //In this function you should to pass latitude, longitude and text to display in infowindow. 
     CreateMarker({lat: locationHelper.aLocations[i][0], long: locationHelper.aLocations[i][1], location:  locationHelper.aLocations[i][2]});

Popup on Google Map icons

Posted: Fri Oct 24, 2014 11:23 pm
by sebastian

I'm just trying to pull more informations from the same collection on the associated clicked pin


Popup on Google Map icons

Posted: Sat Oct 25, 2014 1:31 am
by sebastian

Still need help on this.