Forum | Appery.io

But there is an action that initiates that requests right - a click / tap event...can't it be trapped/updated based on that?

There must be callbacks that you can perhaps you
https://developers.google.com/maps/do...

I can't formulate an idea on how to do it..

So let's say i used the search establishment, then i clicked a marker on one of the result, there will be a Get Direction and a Visit button/link. With the Visit link, the details of the establishment will be inserted into the collection?

The only thing i think i am sure is that

If (49Visits1)
{
marker.color = blue;
}

and so on. but accessing the request, i dont have any idea.

You have created this info with the links and stuff right. In that case why don't you store / save the details first whenever the user clicks the link. If you show me how you created / displayed the info window...and how you placed the contents on it, I can suggest

Hi, Here's what I did to show infowindow on the markers.

I replaced your code
codevar sfLatlng = new google.maps.LatLng(placeData.geometry.location.lat, placeData.geometry.location.lng);

var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: placeData.name,
/code

with

createMarker(placesData);

then created a function for createMarker
codefunction createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
//icon: "http://maps.google.com/mapfiles/kml/paddle/blu-circle.png",
});

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

 infowindow = new google&#46;maps&#46;InfoWindow({content: '<div style="line-height:1&#46;35;overflow:hidden;white-space:nowrap;">'+place&#46;name+'</br>'+place&#46;vicinity+'</br><a href="#">Get Directions</a>'+'</br><a href="">Visit</a>'+'<>'}); 
 infowindow&#46;open(map, this); 

});
}/code

The links for Get Directions and Visit are still null..

You'd want to have a look at this

https://developers.google.com/maps/do...

To open things up you can do things like this

var marker = new google.maps.Marker({
position: new google.maps.LatLng(123, 123),
url: "http://www.google.com",
map: map
});

google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});

This might be useful

https://developers.google.com/maps/do...

In case you need to reverse geocode or something...if you want to turn the co-ordinate into a readable address

https://developers.google.com/maps/do...

For the links related to directions and visits, you'll just need to construct the right url / api calls based on details. Let me know specifically what you need - if possible with a mock screenshot - I can guide you with that

Cheers,
M&M

Can I get a little help on the search function we created?

I wanted to adjust the Zoom level based on the markers on the map. It seems that the zoom level of the map upon load is predefined on the code. So what I want to do is automatically zoom the map where all the markers are seen.

I searched on the internet but I can't seem to work it out. Most of the suggestions said to use

map.fitBounds();

Thanks in advance

This should do the trick. All you'd need are these lines that I have commented with the words "fitbounds"

code

 var bounds = new google.maps.LatLngBounds(); // fitbounds 

 for (var i = 0; i < placesData&#46;length; i++) { 
     placeData = placesData[i]; 
     var sfLatlng = new google&#46;maps&#46;LatLng(placeData&#46;geometry&#46;location&#46;lat, placeData&#46;geometry&#46;location&#46;lng); 

     var marker = new google&#46;maps&#46;Marker({ 
         position: sfLatlng, 
         map: map, 
         title: placeData&#46;name, 
     }); 

     bounds&#46;extend(sfLatlng); &#47;&#47; fitbounds 

 } 

  map&#46;fitBounds(bounds); &#47;&#47; fitbounds 

/code

Here is the explanation to what we actually did

var bounds = new google.maps.LatLngBounds(); // We declare a bounds object
bounds.extend(LatLng); // For each marker that we add, we need to extend the bounds
map.fitBounds(bounds); // then call fitbounds(bounds)

Good solution!

About the other things I am doing..

Upon clicking the marker, Infowindow will show with Get Directions link, is it possible to show the direction on the same page/map? or should I go open a new page? Can I get the lat lng of the marker?

I am really lost about the thing I want to do: Change color marker base on number of visit

Referring to your question whether you can get lat lng of the marker. Well, that is pretty easy. You had already binded a click event to the market. You just need this.position to be added before your infowindow popup

code
google.maps.event.addListener(marker, "click", function (event) {
var latlng = this.position; /* This will get you the latitude and longitude. After this then show the infowindow...and do other stuff. You can use the previously saved values for use in other actions. */
});
/code

As for the question on showing the direction on the same page, I'd say that should be in line with how your current navigation / flow is designed.

And when you say colour marker base, you mean when you populate the map with markers, you want the marker colours to be different based on number of visits?

[quote:]And when you say colour marker base, you mean when you populate the map with markers, you want the marker colours to be different based on number of visits?[/quote]

Yes exactly. But the thing is, How to add number of visits? isn't Google Places Nearbysearch sends request to Google Places Library? Do you think this is possible?

So from clean start, the user will search for an establishment so all of the establishment results has RED MARKER. Then the user will click on one marker and click visit. So the next time or if other user will search, and if the establishment that was previously visited shows up as result, it should have different color marker.

I think I explained it clear. Is this possible? What can you suggest?