Show multiple location marker on Google map - google-maps

How can we openInfoWindowHtml on google map while mouse over on PHP MySQL result as follows,
http://www.yelp.com/c/denver/health
This sites shows Information window on google map while mouse over on result title
Tried as following,
//<![CDATA[
var map;
var geocoder;
var markerArray = [];
function loadMap(params) {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
map.setZoom(8);
searchLocationsNear(params)
}
}
function searchLocationsNear(params) {
var data = JSON.parse(params);
var lenght = data.length;
var bounds = new GLatLngBounds();
for ( var i = 0; i < lenght; i++) {
// check lat and long available with data
if (data[i].enough_for_map) {
var name = data[i].name;
var address = data[i].address;
if (data[i].description)
var description = data[i].description;
var point = new GLatLng(data[i].latitude, data[i].longitude);
var marker = createMarker(point, name, address, description);
map.addOverlay(marker);
markerArray[i + 1] = marker;
var el_index = $('service_name_' + i);
if (el_index) {
el_index.addEvent('mouseover', marker);
// GEvent.addDomListener(el_index, 'mouseover', function() {
// GEvent.trigger(markerArray[i], 'click');
// });
}
bounds.extend(point);
}
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
function createMarker(point, name, address, description) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b> <br/><p>' + description + '</p>' + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
above map locations pointed from mysql result set.
<h2>
<a id="service_name_1" href="/example/details/bookkeeper/191">Photographer</a>
</h2>
<h2>
<a id="service_name_2" href="/example/details/bookkeeper/192">Teacher</a>
</h2>
<h2>
<a id="service_name_3" href="/example/details/bookkeeper/193">Accountant</a>
</h2>
Excepted result:
While mouseover on each h2 should show corresponding location info on map.
Any suggestion will greatly appreciated
Thanks

How far have you gotten?
In principle you could,
Put a standard 'click'-event listeners on the markers you've placed on the map which displays the custom infoWindow (a few different approaches/examples here: http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/demogallery.html).
Have another listener for 'mouseover' on the li elements of the sidebar-list, which in turns triggers the click-event. (Here's how to trigger google map events: http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/reference.html#event)

Related

How to create pop up windows on google map clusterer circles

I am using the following google map plugin
google map clusterer
And it works perfectly(insead of random variable that you see in that link I just read locations from database.)
Now I have been asked the followoing: when a user hover on the clustered area(Not a markers) , by clustered area I mean red or yellow or blue circle , I want a pop up window appears for showing some information . I searched the web a lot but I could not find anything, Is it possible to do this?(I appreciate any help)
Update:
Here is the code that I am using :
$('#map_canvas').gmap({ 'zoom': 3, 'disableDefaultUI': true }).one('init', function (evt, map) {
var bounds = map.getBounds();
var temp = mark1;
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 300; i++) {
var contentString = 'test';
var $marker = $(this).gmap('addMarker',
{
'id': i, 'position': new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()),
'content': 'm_' + i
}).click(function (i) {
$('#map_canvas').gmap('openInfoWindow', {
content: this.content
}, this);
});
markers.push($marker); // add to the marker array
}
$(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
});
With the latest markerclusterer.js this should work:
google.maps.event.addDomListener(markerClusterer, 'mouseover', function() {
console.log('mouse over marker clusterer');
});

Google Maps Api V3 Zoom links in infowindow not working

I am building a store locator using php sql and javascript. I've done this tutorial https://developers.google.com/maps/articles/phpsqlsearch_v3 and got it working. I am trying to implement zoom in/out links on the infoWindows, for when the user clicks a marker. Its not working, in FireFox I am getting no errors in the console. In Chrome I am getting Uncaught TypeError: Object # has no method 'setCenter'
Ive been searching the forums but have been unable to find a solution. Sorry I dont have a version online to look at, working locally. Below is the script I am using.
var map = null;
var markers = [];
var infoWindow;
var locationSelect;
//On page load Create a google map in #map
//Set default cordinates & Map style to roadmap
function load() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
infoWindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
//Search for LAT/LNG of a place using its address using Google Maps Geocoder
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
//Clears Prve location, in info box
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
//Look for locations near by and loop through all data getting lat & lng of each marker
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'http://localhost:8888/starward/wp-content/themes/starward/map_request.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var zoom = 18;
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address,zoom);
bounds.extend(latlng);
}
map.fitBounds(bounds);
map.setZoom(11);
// map.setCenter(center);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
//Creates marker on the map
//Adds event for user when they click address info pops up
function createMarker(latlng, name, address, zoom) {
//var html = "<b>" + name + "</b> <br/>" + address
// add the zoom links
var html = "<b>" + name + "</b> <br/>" + address
html += '<br>Zoom To';
html += ' [+]';
html += ' [-]';
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
marker.MyZoom = zoom;
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
//Look up XML sheet to get data
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
It works for me in both IE and Firefox. Although to me the behavior makes more sense if I set the center for the "ZoomTo" link as well:
html += '<br>Zoom To';

Hiding google map v3 markers. What am I doing wrong?

I am trying to hide a selected category of google map markers when an external javascript function hidetype() is called. To no avail.
I took the general concept from: http://www.geocodezip.com/v3_MW_example_categories.html
Below is the code that extracts my marker info from mysql derived XML. I have the markers grouped by type.
downloadUrl("phpsqlajax_genxml2_snow.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "Some infoBubble HTML";
var Gtip = "<b>" + name + "</b>";
var icon = customIcons[type] || {};
var hover = icon.hover;
var hoverout = icon.icon;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
});
marker.mytype = type;
bindInfoWindow(marker, map, infoWindow, html, Gtip, hover, hoverout);
}
});
}
function hidetype(category) {
alert(category);
for (var i=0; i<markers.length; i++) {
if (markers[i].mytype == category) {
markers[i].setVisible(false);
}
}
}
An example of how I'd externally try to remove markers is:
<img onclick="hidetype('1')" src=...>
This currently spits out an alert with the passed type variable but doesn't remove the markers. Thanks in advance!

Google API and map.panTo: not panning

I'm trying to improve my sound project site, but I'm stuck in... panning.
I have a Google map populated by markers, associated to a text and a recorded sound. It works. I'm trying to allow user to navigate map through panning, by I can't get my map panning.
I'm not an expert in php or Google API and this is my first post here, hope it's well formatted.
The web address of the project is soundplaces.net
I've created a function map_panning(), and then tried to call this function with
please PAN
in content div.
The map just reloads... even if I tried to place a "return false" in the function.
I also tried to make the map pan when a marker is clicked
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
But still, does not work.
Can anybody help me?
This a greater part of the code I have in my default.ctp (the site is made with CAKE), hope it helps.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(<?php echo $CenterMap; ?>), 13);
map.setMapType(G_SATELLITE_MAP);
GDownloadUrl("http://www.soundplaces.net/xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var description = markers[i].getAttribute("description");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var file_name = markers[i].getAttribute("file_name");
var marker = createMarker(point, name, description, address, type, file_name);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, description, address, type, file_name) {
//var marker = new GMarker(point, customIcons[type]);
markerOptions = { icon:soundIcon };
var marker = new GMarker(point, markerOptions);
var html = "<b>" + name + "</b> <br/>" + address + "<br />" + description + "<br />" + "<object type='application/x-shockwave-flash' data='/media/dewplayer.swf?mp3=/media/audio/"+file_name+"' width='200' height='20'><param name='movie' value='dewplayer.swf?mp3=media/audio/"+file_name+"' /></object>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
return marker;
}
function map_panning() {
map.panTo(new google.maps.LatLng(44.433373,10.712251));
return false; //cancel navigation
}
Then in body
<body onload="load()" onunload="GUnload()">
<div id="content">
Please PAN
<?php echo $this->Session->flash(); ?>
<?php echo $content_for_layout; ?>
</div>
<?php echo $this->element('sql_dump'); ?>
</body>
You're mixing up a combination of Google Maps API 2 and API 3 code. The two don't work together, you have to use one or the other. API 2 is deprecated, so you should preferably use API 3.
e.g. new google.maps.LatLng(44.433373,10.712251) is API 3 but new GMarker(point, markerOptions) is API 2.
And if you did want to keep it all with API 2, you should probably amend your map_panning function to be something like:
map.panTo(new GLatLng(44.433373,10.712251));

Javascript - Google api refresh event

Im doing a php web, that refresh its content with ajax and map is refreshed calling with a timer the load() function of the map.. thats no problem
My problem is, i have to put a map.setCenter first time. Imagine i start to search a marker i put in the map, and then after 20 seconds it reloads the map and it is going again to my "setCenter".. i dont want that. I want to refresh but the map STAYS where i am searching...
is there any function for doing that? here is my load function
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-34.603365,-58.379416),11);
map.enableScrollWheelZoom();
GDownloadUrl("creoXml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("numMovil");
var type = "Movil";
var nameTit = "Móvil "+name;
var point = new GLatLng(parseFloat(markers[i].getAttribute("latitud")),
parseFloat(markers[i].getAttribute("longitud")));
var marker = createMarker(point, nameTit,type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name,type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
look that everytime i call load(), my setCenter is that.. and if i remove the setCenter with a condition, the map turns into white.. thanks
Put a global variable in you code and call it loading=1.Then in your load function put something like this
if(loading==1){
setCenter....
loading=0;
}