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));
Related
All,
I've got the following code to display my markers on my maps:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
var map,
infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap()
{
map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 12,
mapTypeId:google.maps.MapTypeId.ROADMAP,
center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>,
<?php echo $_SESSION['pav_event_longitude']; ?>)
});
addPoints(myStores);
}
function addPoints( points )
{
var bounds=new google.maps.LatLngBounds();
for ( var p = 0; p < points.length; ++p )
{
var pointData = points[p];
if ( pointData == null ) {map.fitBounds(bounds);return; }
var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
bounds.union(new google.maps.LatLngBounds(point));
createMarker( point, pointData.html );
}
map.fitBounds(bounds);
}
function createMarker(point, popuphtml)
{
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new google.maps.Marker(
{
position:point,
map:map
}
);
google.maps.event.addListener(marker, 'click', function() {
infowin.setContent(popuphtml)
infowin.open(map,marker);
});
}
function Store( lat, long, text )
{
this.latitude = lat;
this.longitude = long;
this.html = text;
}
var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>
This works great. However I'm trying to say add a number over the marker so that people can relate the number on my site with the marker in Google Maps. How can I go about creating the number over top of my markers (on top of the actual icon and not in an information bubble)?
Any help would be greatly appreciate! Thanks in advance!
EDIT: This API is now deprecated, and I can no longer recommend this answer.
You could use Google's Charts API to generate a pin image.
See: http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins
It'll make and return an image of a marker from the parameters you specify. An example usage would be: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2|FF776B|000000
To implement it into your Google Map, it can be added into the new Marker() code:
var number = 2; // or whatever you want to do here
var marker = new google.maps.Marker(
{
position:point,
map:map,
icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000',
shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow'
}
);
EDIT:
For quite some time now, map markers have an option called label available.
var marker = new google.maps.Marker({
position:point,
map:map,
label: "Your text here."
});
Labels themselves have few options to play with. You can read more about it here.
Original answer
Here is a service similar to one described by Rick - but still active and you can upload your own marker image.
Service is no longer available.
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)
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;
}
I have the following script to use the google maps API, I have to create a map that has more than one Marker (the balloon shaped icon pointing to something) and i need each of those markers to point on a different area of the map (i.e. different coordinates), how can i do it?
NOTE: I do not have latitude and longitude for the area on which marker has to be placed instead I have the address of the area on which marker has to be placed.
The code to display multiple markers on Google map is given below but it does not work as expected!
var map = null;
var geocoder = null;
function initializeNew() {
var allAddress = document.getElementById("HiddenField1").value;
var testary = new Array();
testary = allAddress.split("|");
if (GBrowserIsCompatible()) {
//calls map to appear inside <div> with id, "map_canvas"
map = new GMap2(document.getElementById("map_canvas"));
//adds zoom and arrow controls to map
//map.addControl(new GSmallMapControl());
var marker = null;
var i = 0;
for (i = 0; i < testary.length; i++) {
address = testary[i];
geocoder = new GClientGeocoder();
//converts a street address into geocode for the api
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
//Provides map,satellite,hybrid and terrain views in the map along with zoom control
map.setUIToDefault();
}
}
)
}
}
}
I have stored address of group of items in an array and looped to display markers in the map. This displays only one marker for the last address present in the array. Please correct this code or provide new code to display multiple markers in Google map by providing address.
I ran into this exact same problem and fixed it. Look at the code that I have used. The specific bits are that marker needs to be an array and when you open the infowindow the content needs to be stored in the marker array. I would also suggest that you use something JSON instead which is easier to parse instead of separating with '|'.
try this: put var in front of marker
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
UPDATE
var geocoder = new GClientGeocoder();
var addresses = ["new york","chicago"];
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
if (!point) {
alert(_cur + " not found");
} else {
console.log(_cur+":"+point);
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
</script>
I have Google Maps on a website that sets the marker based on an address.
Here's an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/
As you can see there is no marker on the map. But if you scroll upwards the marker is sitting just out of view.
Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there something wrong with my code or is it Google?
Here is my JavaScript Code:
<script type="text/javascript">
$(document).ready(function(){
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>
-
function load(title, address, type) {
if (GBrowserIsCompatible()) {
var map;
var geocoder;
map_id = document.getElementById("map");
map = new GMap2(map_id);
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(24, 0), 17);
map.enableDoubleClickZoom();
if (type == 'sat') {
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GHierarchicalMapTypeControl());
} else {
map.setMapType(G_NORMAL_MAP);
}
geocoder = new GClientGeocoder();
geocoder.getLocations(address, function (response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
//map_id.innerHTML('Could not find address on Google Maps');
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
map.setCenter(point, 17);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Creates one of our tiny markers at the given point
function createMarker(point, index) {
var marker = new GMarker(point, icon);
var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
map.addOverlay(marker);
marker.openInfoWindowHtml(myMarkerContent);
GEvent.addListener(marker,"click",function() {
marker.openInfoWindowHtml(myMarkerContent);
});
}
createMarker(point);
}
});
}
}
If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?
There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.
E.g.- instead of iFrame src="maps.google.com/ etc etc"
have it as src="pages/map.html"
Anyway, this post is 6 months old but better late than never!
For me, the problem was the iframe having size 0 (display:hidden) when the map was loaded. I added a delay to load the map after the iframe was loaded. This race condition could explain why some of the addresses rendered correctly.
Perhaps try this:
<script type="text/javascript">
$(document).ready(function(){
setTimeout("delayedLoad()",100);
});
function delayedLoad() {
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
}
</script>
(thanks to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)