Jai Singh
Posts: 0
Joined: Tue May 20, 2014 9:46 pm

Popup on Google Map icons

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.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Popup on Google Map icons

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.

Jai Singh
Posts: 0
Joined: Tue May 20, 2014 9:46 pm

Popup on Google Map icons

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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Popup on Google Map icons

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.

Jai Singh
Posts: 0
Joined: Tue May 20, 2014 9:46 pm

Popup on Google Map icons

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

Alex GG
Posts: 0
Joined: Thu Nov 14, 2013 11:11 pm

Popup on Google Map icons

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.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Popup on Google Map icons

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.

sebastian
Posts: 0
Joined: Tue Oct 21, 2014 9:46 pm

Popup on Google Map icons

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]});
sebastian
Posts: 0
Joined: Tue Oct 21, 2014 9:46 pm

Popup on Google Map icons

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

sebastian
Posts: 0
Joined: Tue Oct 21, 2014 9:46 pm

Popup on Google Map icons

Still need help on this.

Return to “Issues”