Develop Reference

How to get all the pins/markers in on click of a markercluster in google maps?

I am using google maps api to create a store locator with clusters and I am referring the marker cluster api.
I wanted to get the list of stores with in a markercluster rather than returning marker cluster with pins/markers. Please find the below code -
google.maps.event.addListener(mapsCore.mapsVar.markerCluster, 'clusterclick', function(cluster) {
var content = "";
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//----
//Get markers
console.log(cluster.getSize());
var markers = cluster.getMarkers();
var x = {};
$(mapsCore.mapsVar.totalResults.Result).each(function(k, v) {
$(markers).each(function(km, vm) {
if (parseFloat(v.LAT) == parseFloat(markers[km].position.lat()) && parseFloat(v.LON) == parseFloat(markers[km].position.lng())) {
// locArr[k] = { lat: parseFloat(v.CounterLatitude), lng: parseFloat(v.CounterLongitude) };
x.Counter_ID = v.Counter_ID;
x.Counter_Name = v.Counter_Name;
x.Counter_Zip_code = v.Counter_Zip_code;
x.Address_1 = v.Address_1;
x.Address_2 = v.Address_2;
x.Province = v.Province;
x.City = v.City;
x.Area = v.Area;
x.SubArea = v.SubArea;
x.Counter_Tel = v.Counter_Tel;
x.Counter_Email = v.Counter_Email;
x.Open_Time = v.Open_Time;
x.Close_Time = v.Close_Time;
x.LAT = v.LAT;
x.LON = v.LON;
x.MR_FLG = v.MR_FLG;
mapsCore.mapsVar.clusterDetail.Results.push(x);
x = {};
}
});
});
});

As a workaround you can set a custom image to an transparent png and text size to 0, that way it'll be invisible on the map.
cluster.setStyles({
url: your_path/transparent.png,
height: 20,
width: 20,
textSize: 0
});
Alternatively you can try and see if setting the image height and width to 0 works.

All,
thanks for your help for formatting my code and comments any way I found the solution for it. I will attach the spinet of code below
google.maps.event.addListener(mapsCore.mapsVar.markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//----
//Get markers
console.log(cluster.getSize());
var markers = cluster.getMarkers();
var x = {};
mapsCore.mapsVar.clusterDetail.Counters.length = 0;
$(mapsCore.mapsVar.totalResults.Counters).each(function(k, v) {
$(markers).each(function(km, vm) {
console.log(parseFloat(v.CounterLatitude) == parseFloat(vm.position.lat()) && parseFloat(v.CounterLongitude) == parseFloat(vm.position.lng()));
if (parseFloat(v.CounterLatitude) == parseFloat(vm.position.lat())) {
// locArr[k] = { lat: parseFloat(v.CounterLatitude), lng: parseFloat(v.CounterLongitude) };
x.CounterCode = v.CounterCode;
x.CounterName = v.CounterName;
x.CounterZipCode = v.CounterZipCode;
x.AddressLine1 = v.AddressLine1;
x.AddressLine2 = v.AddressLine2;
x.Province = v.Province;
x.City = v.City;
x.Area = v.Area;
x.SubArea = v.SubArea;
x.CounterPhoneNumber = v.CounterPhoneNumber;
x.CounterEmailAddress = v.CounterEmailAddress;
x.CounterOpenTime = v.CounterOpenTime;
x.CounterCloseTime = v.CounterCloseTime;
x.CounterLatitude = v.CounterLatitude;
x.CounterLongitude = v.CounterLongitude;
x.IsMagicRingAvailable = v.IsMagicRingAvailable;
mapsCore.mapsVar.clusterDetail.Counters.push(x);
x = {};
}
});
});
console.log(mapsCore.mapsVar.clusterDetail);
var template = $.templates("#mapslist");
var output = template.render(mapsCore.mapsVar.clusterDetail);
$(".store-list-section").html(output);
});
Always need to reset the array of object like -
mapsCore.mapsVar.clusterDetail.Counters.length = 0;

Js Array detect: number of values from php array found (grabbed from database)

This is (again) about array (in my Google map project). After being voteddown, finally I succeed to show multiple markers based on Db data.
I have two PHP pages:
1. inc.php
2. index.php
In inc.php contains values in php array, as follow:
//...... previous code
$googlemap=$result['googlemap'];
$map[] = $googlemap;
}
echo implode(', ' , $map);
The result shows: -5.364000343425874,-150.364000343425874-5.362878747789552,-150.3640003436345874 (this line contains 2 values for example)
To get the values, I use native Ajax:
In index.php contains Javascript codes to fetch the php array (inc.php), extract them into each values for latt and long value, as follow:
Array Values from inc.php is caught by this code:
var wwwsitus = document.querySelector("#valdata").value;
The value inside #valdata grabbed by native ajax:
<script>
function strQuery(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
script_dkill()
}
}
xmlhttp.open("POST", "inc.php?q="+str, true);
xmlhttp.send(null);
}
//start: calling maps
function script_dkill() {
// --- some codes ---
//..........
//}
</script>
Extract #valdata:
var n_result = wwwsitus.split(',');
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
Show the map from this format array:
var wwwsitus = [
['<h4>Universitas Lampung</h4>', x0,y0],
['<h4>Universitas Lampung</h4>', x1,y1]
];
All works 100%.
The problem is:
Values grabbed from database can be 1, 2 or more. (here, I limit the values into 5).
Question:
How do I detect the values in #valdata if #valdata contains 1 or more values so that I can create if for the result???. or, you have other suggestion to handle this.
I hope my question is very clear and pls help me out from this. Thnks.
UPDATED:
What I expect is, for instance:
var wwwsitus = document.querySelector("#valdata").value;
var n_result = wwwsitus.split(',');
if (wwwsitus =null) {
alert('No rent-house found near the place'); // if no value.
// no action
}
else if (wwwsitus =1) {
alert('Found 1 rent-houses'); // if found only 1 value
//continue to show the map based on the value - will show 1 marker.
var x0 = n_result[0];
var y0 = n_result[1];
var wwwsitus = [['<h4>Kost 1</h4>', x0,y0]];
}
else if (wwwsitus =2) {
alert('Found 2 rent-houses'); //if found 2 value
// continue to show the value - will show 2 markers.
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
var wwwsitus = [['<h4>Kost 1</h4>', x0,y0],['<h4>Kost 2</h4>', x1,y1]];
}
HOWEVER, the alert() NOT SHOWING the real number of the values as in the Database. How should I code with this.?

This following solution perhaps stupid coding. But it finally works 1000%.
To detect number of values inside #valdata, I add one input field as follow:
<input type='hidden' id='numvalue' value=''/>
Create native Ajax again to grabbed the information about number of values in new file (e.g. num_inc.php)
Here, with that ajax, I will be able to get number of values exist based on mysql query and send to input field #numvalue.
Here's in num_inc.php last code:
$result = $uQuery->fetchColumn();
if($result> 0) {
echo $result; // number of value detected!!!
}
From the process, I finally can extract the data from #valdata and display the map successfully.
Here's the full code:
<script>
//document.getElementById("qfront").addEventListener("keydown", CalmDown, false);
function script_grabbed(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("numvalue").value = xmlhttp.responseText;
var datafound = document.getElementById("numvalue").value;
var xmlhttp2 = new XMLHttpRequest();
xmlhttp2.onreadystatechange = function() {
if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
document.getElementById("valdata").value = xmlhttp2.responseText;
var wwwsitus = document.getElementById("valdata").value;
var n_result = wwwsitus.split(',');
if (datafound == 1) {
var x0 = n_result[0];
var y0 = n_result[1];
var wwwsitus = [
['<h4></h4>', x0,y0]
];
}
else if (datafound == 2) {
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
var wwwsitus = [
['<h4></h4>', x0,y0],
['<h4></h4>', x1,y1]
];
}
else if (datafound == 3) {
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
var x2 = n_result[4];
var y2 = n_result[5];
var wwwsitus = [
['<h4></h4>', x0,y0],
['<h4></h4>', x1,y1],
['<h4></h4>', x2,y2]
];
}
else if (datafound == 4) {
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
var x2 = n_result[4];
var y2 = n_result[5];
var x3 = n_result[6];
var y3 = n_result[7];
var wwwsitus = [
['<h4></h4>', x0,y0],
['<h4></h4>', x1,y1],
['<h4></h4>', x2,y2],
['<h4></h4>', x3,y3]
];
}
else if (datafound == 5) {
var x0 = n_result[0];
var y0 = n_result[1];
var x1 = n_result[2];
var y1 = n_result[3];
var x2 = n_result[4];
var y2 = n_result[5];
var x3 = n_result[6];
var y3 = n_result[7];
var x4 = n_result[8];
var y4 = n_result[9];
var wwwsitus = [
['<h4></h4>', x0,y0],
['<h4></h4>', x1,y1],
['<h4></h4>', x2,y2],
['<h4></h4>', x3,y3],
['<h4></h4>', x4,y4]
];
}
else{
var no_kampus = document.querySelector("#qfront").value;
alert('Data Kost Sekitar Kampus ' + '"'+no_kampus+'"' + ' Belum Terdaftar!');
}
// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-37.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
streetViewControl: true,
panControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < wwwsitus.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(wwwsitus[i][1], wwwsitus[i][2]),
map: map,
animation: google.maps.Animation.DROP,
icon: icons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(wwwsitus[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
}
}
xmlhttp2.open("POST", "inc.php?q=" + str, true);
xmlhttp2.send(null);
}
}
xmlhttp.open("POST", "inc_num.php?q=" + str, true);
xmlhttp.send(null);
}
</script>
Input Field:
<input id="qfront" name="qfront" placeholder="Type your campus ..."
value="" type="text" onKeyPress="script_grabbed(this.value);" />
<input id="valdata" name="valdata" type="hidden" value=""/>
<input id="numvalue" name="numvalue" type="hidden" value=""/>
in num_inc.php:
$result = $uQuery->fetchColumn();
if($result> 0) {
echo $result;
}
in inc.php:
$googlemap=$result['googlemap'];
$map[] = $googlemap;
}
echo implode(', ' , $map);
NOTE: If you have another nice solution, please let me know. Of course, I like the better one than I attempt.
Complete Source: Github

get NE and SW corners of a set of markers on a google map

I want to get NE and SW corners of a set of markers on a google map. Here I iterate over each marker. Does google or javascript provide a function that gets this with less iteration?
function fnSetBounds(){
var lowLat = 90;
var highLat = -90;
var lowLng = 180;
var highLng = -180;
for (var i = 0; i < myMarkers.length; i++) {
var myLat = myMarkers[i].position['k'];
var myLng = myMarkers[i].position['B'];
// catch low LAT
if (lowLat > myLat){
lowLat = myLat;
}
// catch high LAT
if (highLat < myLat) {
highLat = myLat;
}
// catch low LNG
if (lowLng > myLng){
lowLng = myLng;
}
// catch high lng
if (highLng < myLng) {
highLng = myLng;
}
}
var southWestCorner = new google.maps.LatLng(highLat, lowLng);
var northEastCorner = new google.maps.LatLng(lowLat, highLng);
var bounds = new google.maps.LatLngBounds();
bounds.extend(southWestCorner);
map.fitBounds(bounds);
bounds.extend(northEastCorner);
map.fitBounds(bounds);
}

I would do it this way, add all the positions to an empty bounds:
function fnSetBounds(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < myMarkers.length; i++) {
bounds.extend(myMarkers[i].getPosition());
}
map.fitBounds(bounds);
}

Google Map One Infobox Open

I am building a directory, in this example it's a directory for doctors. I created a javascript array called "locations". The visitor can check checkboxes on the map to choose which kind of doctor should be displayed.
This is a sample of the array of locations to loop through in a for loop
var locations = [
[0, 'Total Care', 1, 0, 0, 0, 0, 0, 'Lake Elsinore', '92530', 'CA', 33.6603, -117.3830, '(951) 674-8779', 1],
... etc
];
This explains each key
locations[i][0] = business claimed or not (0 = unclaimed and 1 is claimed)
locations[i][1] = name
locations[i][2] = if general practitioner = 1, else = 0
locations[i][3] = if surgeon = 1, else = 0
locations[i][4] = if cardiologist = 1, else = 0
locations[i][5] = if urologist = 1, else = 0
locations[i][6] = if gynecologist = 1, else = 0
locations[i][7] = if pulmonologist = 1, else = 0
locations[i][8] = city
locations[i][9] = zip code
locations[i][10] = state
locations[i][11] = latitude
locations[i][12] = longitude
locations[i][13] = phone number
locations[i][14] = z-index
All works fine. I have a search function so the visitor can search by name. In the google map code below, I want to find a way to have the infoBox open on the marker of the doctor that was entered in the search function e.g.
if (locations[i][1] == "doctor name"){
code here }
I have been trying to find a solution for the past three days and can't find it, so I would really appreciate some help. This is the Google Map code:
var infoBox = null;
function initialize()
{
var centerMap = new google.maps.LatLng(33.6603, -117.3830);
var mapOptions = {zoom: 11,center: centerMap,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
setMarkers(map, locations);
}
function setMarkers(map, markers)
{
var image = {url: 'images/marker.png',size: new google.maps.Size(17, 23),origin: new google.maps.Point(0,0),anchor: new google.maps.Point(8, 23)};
gpr = $('#check1').is(':checked') ? 1 : 0; // general practitioner
srg = $('#check2').is(':checked') ? 1 : 0; // surgeon
car = $('#check3').is(':checked') ? 1 : 0; // cardiologist
uro = $('#check4').is(':checked') ? 1 : 0; // urologist
gyn = $('#check5').is(':checked') ? 1 : 0; // gynecologist
pul = $('#check6').is(':checked') ? 1 : 0; // pulmonologist
for (var i = 0; i < markers.length; i ++)
{
var locations = markers[i];
var siteLatLng = new google.maps.LatLng(locations[11], locations[12]);
var boxText = document.createElement('div');
boxText.style.cssText = 'some styling';
link = locations[1].replace(' ','_');
link = link.toLowerCase();
// find out if this genre of doctor was searched for
setMarker = 0;
if (gpr == 1){if (locations[2] == 1){setMarker = 1;}}
if (srg == 1){if (locations[3] == 1){setMarker = 1;}}
if (car == 1){if (locations[4] == 1){setMarker = 1;}}
if (uro == 1){if (locations[5] == 1){setMarker = 1;}}
if (gyn == 1){if (locations[6] == 1){setMarker = 1;}}
if (pul == 1){if (locations[7] == 1){setMarker = 1;}}
// if one of the checkboxes was checked
if (setMarker == 1)
{
if (locations[0])
{
boxText.innerHTML = 'some html with link'; // claimed business
}
else
{
boxText.innerHTML = 'some html without link'; // unclaimed business
}
var infoBoxOptions = {content: boxText,disableAutoPan: false,maxWidth: 0,pixelOffset: new google.maps.Size(5, -80),zIndex: locations[14],boxStyle: {background: "url('images/tip.png') no-repeat",opacity: 0.9,width: "405px",height: "75px",border: '0px solid #900'},closeBoxMargin: "13px 5px 5px 5px",closeBoxURL: "images/close.gif",infoBoxClearance: new google.maps.Size(1, 1),isHidden: false,pane: "floatPane",enableEventPropagation: false};
var marker = new google.maps.Marker({position: siteLatLng,map: map,title: locations[1],zIndex: locations[14],icon: image,html: boxText});
google.maps.event.addListener(marker, 'click', function (e) {infoBox.setContent(this.html);infoBox.open(map, this);});
var infoBox = new InfoBox(infoBoxOptions);
}
}
}
Your help will be much appreciated. Thank you.

Unless I'm misunderstanding, you can just loop through your markers until the title matches the search text, and then open the appropriate info box on that marker. Something like:
$('#searchButton').click(function() {
var searchText = $('#searchBox').val();
for (var i = 0; i < markers.length; i++) {
if (markers[i].title.indexOf(searchText) > -1)
infoBoxes[i].open(map, markers[i]);
}
});
This example assumes you have two existing parallel arrays of markers and their corresponding info boxes.

Rectangular Overlays appearing only after dragging the map

I have a lot of markers and I m using markerClusterer to display them on the map.Additionally on click of a checkbox I need to display a rectangular overlay (title) near all these markers.
I have written 2 functions as follows for creating the overlay and deleting it.
function createLabel(posi,name){
posicion = etiquetaNombre.length;
etiquetaNombre[posicion] = name;
var label = new Label({
position:posi,
map: map,
text:name
});
rectangleNombre[posicion]=label;
rectangleNombre[posicion].setMap(map);
console.log("add: etiquetaNombre",etiquetaNombre);
myfun();
}
function deletelabel(name){
for(var i = 0; i < etiquetaNombre.length; i++){
if(etiquetaNombre[i] == name){
rectangleNombre[i].setMap(null);
rectangleNombre.splice(i, 1);
etiquetaNombre.splice(i, 1);
}
}
console.log("delete marker"+name);
console.log("delete: etiquetaNombre",etiquetaNombre);
myfun();
}
I m invoking the createLabel function as follows:
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
var latLng = new google.maps.LatLng(40, -100);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(40, -100),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < 10; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var div=document.createElement('div');
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
map: map,
title:"marker"+i
});
posi=marker.position;
name=marker.title;
createLabel(latLng,name);
markers.push(marker);
}
markerClusterer = new MarkerClusterer(map, markers);
Since I am using markerClusterer I had to customize it for my above requirement.I had done it as below.
Cluster.prototype.addMarker = function(marker) {
/// some lines
if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
// Min cluster size not reached so show the marker.
marker.setMap(this.map_);
posi=marker.position;
name=marker.title;
createLabel(posi,name);
}
if (len == this.minClusterSize_) {
// Hide the markers that were showing.
for (var i = 0; i < len; i++) {
this.markers_[i].setMap(null);
name=this.markers_[i].title;
deletelabel(name);
}
}
if (len >= this.minClusterSize_) {
marker.setMap(null);
name=marker.title;
deletelabel(name);
}
this.updateIcon();
return true;
};
The myfun() is called on click of check box is as below.
function myfun(){
var element=document.getElementById('id1');
if(element.checked){
for(var i = 0; i < etiquetaNombre.length; i++){
var div = document.getElementById('normal-'+etiquetaNombre[i]);
if(div!=null){
div.style.display = "";
}
}
console.log("in my fun element checked",etiquetaNombre);
}
google.maps.event.addListener(map, 'bounds_changed', function () {
if(element.checked){
for(var i=0; i<etiquetaNombre.length; i++){
var div = document.getElementById('normal-'+etiquetaNombre[i]);
if(div!=null){
div.style.display = "";
}
}
}
});
}
The problem which I m facing here is that on zooming when the clustered markers are disintegrated the rectangular overlays do not appear for them.But on simply dragging the map it appears.Can anybody guide what I m doing wrong here.
[Edited]
function createLabel(xCenter , yCenter, nombre,banderaPersonalizada){
posicion = etiquetaNombre.length;
etiquetaNombre[posicion] = nombre;
var RectangleBounds = new google.maps.LatLngBounds(new google.maps.LatLng(yCenter,xCenter), new google.maps.LatLng((yCenter+1),(xCenter+1)));
rectangleNombre[posicion] = new RectangleNombre(RectangleBounds);
rectangleNombre[posicion].setMap(map);
}
function RectangleNombre(bounds, opt_weight, opt_color) {
this.bounds_ = bounds;
this.weight_ = opt_weight || 2;
this.color_ = opt_color || "#888888";
}
RectangleNombre.prototype = new google.maps.OverlayView();
RectangleNombre.prototype.onAdd = function(map) {
var idDiv = "normal-"+etiquetaNombre[posicion];
var div = document.createElement("div");
div.id = idDiv;
div.innerHTML = '<span style=" color:blue; font-family:arial; font-size:7.5pt; font-weight:900" > '+etiquetaNombre[posicion]+'</span>';
div.style.position = "absolute";
console.log("banderaCheckEtiqueta"+banderaCheckEtiqueta);
if(banderaCheckEtiqueta){
div.style.display = "";
} else {
div.style.display = "none";
}
this.getPanes().mapPane.appendChild(div);
this.map_ = map;
this.div_ = div;
}
RectangleNombre.prototype.draw = function() {
var proj = this.getProjection();
var c1 = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2 = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());
this.div_.style.width = "0px";
this.div_.style.height = "0px";
this.div_.style.left = c1.x - 12;
this.div_.style.top = c1.y + 2;
}