We Keep Coding

Sencha Touch 2 remove Google map Markers

i'm trying to remove all the markers from a google map using ExtJS. I'm performing a setCenter() operation (i need to remove the old center from the map) and also i want to add a new marker in the new center.
As i know, to get the google map instance i need to perform a getMap() over the map container, i.e map.getMap()
I tried with clearMarkers();, deleteMarkers(); and markers = []; but neither works. The google map object looks really weird on the Chrome Developer tools utility, at least for me.
With the addition, same problem. I'm doing that:
new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
Any help is appreciated!
Thanks.

It's very simple. To remove a marker from the map, call the setMap() method passing null as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.
If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.
Find an example here View example (marker-remove.html)
Read more about Google Maps Tutorial - Remove a marker

Finally i get a solution for that (maybe it's not the better way, but it works)
I decided to have a global variable that references the marker that i have to put over the map.
To define a global variable in sencha i use this approach:
Ext.application({
name: 'SIGCC',
marker: null,
....
....
});
I'm using a custom class to get an AutocompleteTextField, and when the user taps a suggested location the previous marker has to be removed and a new one is placed over the google map. Also i have to recenter the map in the new location
recenterMap: function(location){
//addressMap is the id of the xtype map component
var map = Ext.getCmp('addressMap');
map.setMapCenter({ latitude: location.lat, longitude: location.lng });
if (SIGCC.app.marker){
SIGCC.app.marker.setMap(null);
}
SIGCC.app.marker = new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
//My map is hidden before de users tap action, so i have to unhide them
map.setHidden(false);
},
As you can see, this portion of code references the global variable defined previously.
Hope this helps someone.

Google Map Marker with custom numbering

I have a Google Maps marker function that successfully creates markers on a map like this:
// A function to create the marker and set up the event window
function createMarker(point,html) {
var marker = new GMarker(point,{title:html});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Here is a tinyurl of the exiting code: http://tinyurl.com/b8f9b4l
Using this solution: Google maps: place number in marker?
I've updated this line of code but it is not numbering. What am I doing wrong?
var marker = new GMarker(point,{title:html,icon:'icon: \'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',});

The icon property just needs to be the url. You don't need the extra "icon:", and you should drop the extra comma at the end (IE seems to throw an exception when it finds a dangling comma). Also, the parenthesis you don't need - but probably aren't hurting anything.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + position +'|FF776B|000000'
}
I see where you got the idea. Idk why s/he got a point for that. The extra "icon:" messes it up.
Try this as a test, it should make sure you don't have any problems with the variables inside the url.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=4|FF776B|000000'
}

Javascript argument parameters and google maps

I'm introducing myself to Google Maps API, and to JavaScript as well.
I already have set my map on my website, and now I'm trying to dynamically set multiple markers on the same map.
For that, I wrote this function:
function teste(lat,long){
alert (lat);
alert (long);
//var companyPos3 = new google.maps.LatLng(41.545308,-8.421782);
var companyPos3 = new google.maps.LatLng(lat,long);
var companyMarker3 = new google.maps.Marker({
position: companyPos3,
map: map,
// icon: companyLogo,
title:"Mar!!!" });
//}
...
}
And my problem resides right here. I can't set the google.maps.LatLng with 'lat' and 'long' function parameters. However, the alert dialog messages pop up, showing the values that are from PHP.
I tried also to remove the alert function but the marker didn't show as well.
I'm not sure if it there is a Google Maps API trick, or JavaScript trick.
Oh, and if I set the values as the commented line, it works, but I don't want this solution :).

long is the reserved word in JS. Please check here. So, please try lng instead of long also for setting icon please see here. Try something like
function teste(lat,lng){
alert (lat);
alert (lng);
//var companyPos3 = new google.maps.LatLng(41.545308,-8.421782);
var companyPos3 = new google.maps.LatLng(lat,lng);
var companyMarker3 = new google.maps.Marker({
position: companyPos3,
map: map,
// icon: companyLogo,
title:"Mar!!!" });
//}
...
}

want to get the contents of infobubble of a marker?

I am using gmap v3. I am facing a problem.
The problem is that I am creating dynamically marker and at similar time I am creating the infowindow of that marker.
Now I want to add some contents in any infowindow of a marker.
But don't know how i can get the content of a infowindow.
I have stored my markers objects in a array and also infowindow's objects.
But not found any solution.
I want to get infowindow's content on the basis of marker.
EDIT:
var markerArray = new Array();
var infoArray = new Array();
function placemarker(point,id, contents){
var marker = new google.maps.Marker({
icon: image,
position: point,
map: map,
title: name
});
markerArray[id] = marker;
var infoBubble = new InfoBubble();
var content = contents;
infoBubble.setContent(content);
google.maps.event.addListener(marker,"mouseover",function(event){
for(var i=0; i < infoArray.length ; i++ )
infoArray[i].close();
infoBubble.open(map,marker);
});
infoArray.push(infoBubble);
}
This function is called within a function many time that create marker on map.
now on a condition two markers are at same lat long and I want to show single marker with infowindow of both markers content. I have able to create single marker but not able to append the content in a info window.

If you are already keeping all the InfoWindow's in your infoArray, why don't you simply store them with the same id as you do with your markers?
var markers = {};
var infoWindows = {};
function placemarker(point, id, contents) {
var marker = ...
...
markers[id] = marker;
var infoWindow = ...
...
infoWindows[id] = infoWindow;
}
(Note that I have replaced your arrays with hashes.)
Now you can access every marker's InfoWindow (and its content via getContent()) the same way you access the marker itself.

This is pretty old but figured I would give this a shot
I'm not sure what InfoBubble is for my example I'm using InfoWindow.
function createMarker(objPoint)
{
objPoint = new google.maps.LatLng(strLat, strLng);
strFromHtml = 'Your HTML';
//creates the window with the options
objInfoWindow = new google.maps.InfoWindow(
{
content: strToHtml,
maxWidth: 250,
zIndex: -1
});
var markerOptions =
{
position: objPoint,
map: objMap
}
objMarker = new google.maps.Marker(markerOptions);
//if the marker is clicked open the window
google.maps.event.addListener(objMarker, "click", function()
{
objInfoWindow.open(objMap, objMarker);
});
}
I first create the window, then the marker, I then attach a click listener for the marker to display the infowindow on it when the marker is clicked. You could take the click out and just display it but for my purposes I wanted them to have to click it.
EDIT
Ok I've reread your question about 50 times and I hope this solution is good. As for the multiple markers in one location I don't have an answer for that. I think I have an answer for the multiple markers with its own info. If this doesn't work then you are gonna have to create an example in jsfiddle or something otherwise I don't understand what you want. Check it out here jsfiddle
When creating the infoWindow you only create it once holding default content. So put it in the initialization of the map itself. Then when creating the markers you can use the marker itself to contain the html for the infowindow to show.
var markerOptions =
{
position: objPoint,
map: objMap,
html: strHtml//added to make the marker object store the content of the infowindow
}
Then in your mouseover listener you use this.html to get the content for the infowindow
google.maps.event.addListener(objMarker, "mouseover", function()
{
objInfoWindow.setContent(this.html);
objInfoWindow.open(objMap, this);
});
As for the multiple markers in one spot. I would have to say programmatically you are gonna have to catch this and only create one marker with the content of both in one marker.

I don't think it is possible to search for a marker in a google maps (which I think is what you are trying to do).
Do you need to create two markers when they anyway are on the same point? If no I would just keep track of the infoBubbles in an array where the point coordinates is the key. So before you create a new infoBubble you check if you already have one and if that is the case you just replace it with a new combined infoBubble.
Here is a code draft.
if(infoArray[point.lat+'_'+point.lng] != undefined){
tmpBubble = infoArray[point.lat+'_'+point.lng];
infoBubble = createCombinedBubble(tmpBubble, infoBubble);
}
infoArray[point.lat+'_'+point.lng] = infoBubble;

Color markers on Google map using Javascript

Hello I'm new to rails in general.
I'm building a web application using rails in which I need to render different people locations using google map.
Basically I want to generate different color markers depending on user group. Now how do I do that processing in the javascript file?

You can use MapIconMaker Library for coloring markers, you can define many colors to manege your groups:
var GROUP_1 = MapIconMaker.createMarkerIcon({primaryColor: "#04b404"});
var GROUP_2 = MapIconMaker.createMarkerIcon({primaryColor: "#58acf4"});
var GROUP_3 = MapIconMaker.createMarkerIcon({primaryColor: "#ff8000"});
point = new GLatLng(latitude, longitude);
marker = new GMarker(point,{icon: GROUP_1});
Hope this helps

If I remember correctly, other than the default icon, you must use an image for the icon in other coloring scenarios as described here : http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions
In an implementation I've used before, it looked similar to this:
$.each(data, function() {
var post_position = new google.maps.LatLng(this.latitude, this.longitude);
var marker = new google.maps.Marker({
position: post_position,
map: map,
title: this.title,
icon: "images/purple_icon.png"
});
markerArray.push(marker);
})

You can use gmaps4rails and customize your markers according to whatever rule you want.
See screencasts (I know res is poor but vote on Railscasts!).