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;
}
Related
I have a function that loads my map to keep my map static.
<script>
var delArray = new Array();
var gm;
var map;
var iw;
var oms;
window.onload = function(){
gm = google.maps;
map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.TERRAIN,
center: new gm.LatLng(-29.335205, 24.793563),
scrollwheel: false,
zoom: 6
});
iw = new gm.InfoWindow();
oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true});
}
</script>
I then use another function to construct my spiderfier data.
<script>
function spider(mapData){
var usualColor = 'eebb22';
var spiderfiedColor = 'ffee22';
var iconWithColor = function(color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
color + '|000000|ffff00';
}
var shadow = new gm.MarkerImage(
'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new gm.Size(37, 34), // size - for sprite clipping
new gm.Point(0, 0), // origin - ditto
new gm.Point(10, 34) // anchor - where to meet map location
);
oms.addListener('click', function(marker) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new gm.LatLngBounds();
for (var i = 0; i < mapData.length; i ++) {
var datum = mapData[i];
var loc = new gm.LatLng(datum[0], datum[1]);
bounds.extend(loc);
var marker = new gm.Marker({
position: loc,
title: datum[2],
animation: google.maps.Animation.DROP,
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
marker.desc = datum[3];
oms.addMarker(marker);
delArray.push(marker);
}
map.fitBounds(bounds);
// for debugging/exploratory use in console
window.map = map;
window.oms = oms;
}
</script>
And Another to remove markers from the map:
<script>
function delMe(){
if(delArray){
for(i =0; i <= delArray.length; i++){
delArray[i].setMap(null);
}
this.delArray = new Array();
}
}
</script>
My map data (mapData) comes from a php script and passed on via Jason. And that's also where I call my delete function right before I call my spider (map) function. This I do to clear the map before I pass the new data.
$( document ).ready(function() {
delMe();
var pdata = $js_array;
spider(pdata);
});
Now, my problem is that all data is displaying perfectly but after calling the delMe() function it clears the markers 100% but then my map become unresponsive it's not loading new data when calling the spider() function with new data.
I can overcome this problem by reloading/creating the map again, but I want to avoid that and only use a static map. And if I don't delete markers it just fill the map with 100's of markers mixing the old and new.
I am a bit of a noob when it comes to javascript/jquery, any help will be much appreciated!.
It looks like you're missing an OMS removeMarker call in your delMe function, which should go something like this:
function delMe(){
if (delArray){
for (i =0; i <= delArray.length; i++){
oms.removeMarker(delArray[i]);
delArray[i].setMap(null);
}
this.delArray = [];
}
}
(It's possible you have other problems too, but here's a start).
It's not clear from what you write, but are you using the JS developer console? Google '[your browser] developer console' for more info — it lets you see if errors are causing your map to become unresponsive.
I have an increasingly complex Google map which plots thousands of points and clusters them. I have an infowindow opening when the user clicks one of the map markers and it all works great. However, one improvement I'd like to make is to force all other infowindows to close when a new one is opened so that only 1 infowindow can be open at once.
I've tried adding some code (if (infowindow) infowindow.close();) into the listener function to do this, but I think the issue is wider in that I'm currently creating an infowindow for each marker, and there is no access to other infowindows on the event which opens a new one. So, from reading around this it would seem to be a better idea to have just one infowindow which gets reused rather than many.
Trouble is, the code is at the edge of what I can really understand, and my experiments in doing this so far have just broken everything.
The code I currently have is as follows:
var _iconCenter = new google.maps.MarkerImage('/css/img/map-marker.png',
new google.maps.Size(38, 48),
new google.maps.Point(0,0),
new google.maps.Point(19, 44));
var shadow = new google.maps.MarkerImage('/css/img/map-marker-shadow.png',
new google.maps.Size(57, 49),
new google.maps.Point(0,0),
new google.maps.Point(7, 44));
var _icon = '/css/img/map-marker-purple.png';
var infowindow;
var markersArray = [];
var map;
var currentPosition = 0;
var currentmarker;
var firstload = true;
var maploaded = false;
var interval = 5000;
var geocoder;
var stylez = [];
function initialize(items,loop,zoom) {
geocoder = new google.maps.Geocoder();
if (items.length > 0) {
var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng);
var myOptions = {
zoom: zoom,
center: latlng,
//mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setOptions({styles: stylez});
for (var i = 0; i < items.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(items[i].Lat, items[i].Lng),
title: items[i].Title,
icon: _icon,
shadow: shadow,
infocontent: items[i].Description
});
marker.setMap(map);
attachListener(marker,'marker:'+i);
markersArray.push(marker);
}
//set style options for marker clusters (these are the default styles)
mcOptions = {
gridSize: 44
}
var markerCluster = new MarkerClusterer(map, markersArray, mcOptions);
google.maps.event.addListener(map, "tilesloaded", function () {
if(loop == true){
SetLoop();
}
});
function attachListener(marker,content){
google.maps.event.addListener(marker, "click", function () {
var infowindow = new google.maps.InfoWindow();
map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), marker.getPosition().lng()));
infowindow.setContent(content);
infowindow.open(map,this);
});
}
}
}
function SetLoop() {
//This will fire everytime map loads or recenteres
maploaded = true;
if (firstload) {
firstload = false;
Recenter();
}
}
function Recenter() {
//If previous iteration is not loaded completely, wait to avoid errors
//It could happen for slow internet connection
if (maploaded) {
maploaded = false;
} else {
//keep adding 1 second to interval for slow connection till page loads
interval = interval + 1;
setTimeout("Recenter()", interval);
return;
}
if (infowindow != null && currentmarker != null) {
//currentmarker.icon = _icon;
currentmarker.icon = _iconCenter;
currentmarker.setMap(map);
infowindow.close(map, currentmarker);
}
markersArray[currentPosition].icon = _iconCenter;
markersArray[currentPosition].setMap(map);
map.setCenter(new google.maps.LatLng(markersArray[currentPosition].getPosition().lat(), markersArray[currentPosition].getPosition().lng()));
infowindow = new google.maps.InfoWindow({
content: markersArray[currentPosition].infocontent,
size: new google.maps.Size(50, 50)
});
infowindow.open(map, markersArray[currentPosition]);
currentmarker = markersArray[currentPosition];
if (currentPosition >= markersArray.length - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
if (markersArray.length > 1) {
setTimeout("Recenter()", interval);
}
}
Is the best way to re-use the infowindow or is it okay to do this another way? Any help in pointing me in the right direction here would be much appreciated, thanks folks!
Remove the 'var infowindow' declaration from function attachListener(). If you declare it inside the function it becomes local to the function and you create a new instance each time you execute the function. so:
function attachListener(marker,content){
google.maps.event.addListener(marker, "click", function () {
// marker.getPosition() already returns a google.maps.LatLng() object
map.setCenter(marker.getPosition());
infowindow.close();
infowindow.setContent(content);
infowindow.open(map,this);
});
}
and instead, declare it as a global variable:
var _icon = '/css/img/map-marker-purple.png';
var infowindow = new google.maps.InfoWindow();
//...etc
so that you have only one infowindow object in the whole application
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));
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)
i have displayed multiple pins in google map with infoWindows,and there location name displayed in html page, now i need this when click on any location name moving pins from one to another, and have show it's infoWindow.
so, is there any solution?
http://i53.tinypic.com/hvec15.jpg
Here is my code
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(51.50015, -0.12624), 13);
// Creates a marker at the given point
// Clicking the marker will hide it
var marker = new GMarker(new GLatLng(lat, longt));
map.addOverlay(marker);
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker,"click", function() {
var myHtml = number + "";
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
// Note that we don't add the secret message to the marker's instance data
var bounds = map.getBounds();
for (index in markers){
var n=markers[index];
var latlng = new GLatLng(n.lat,n.lng);
map.addOverlay(createMarker(latlng, n.name));
}
marker.openInfoWindowHtml(WINDOW_HTML);
}
}
hey i got it with google map_lib,
see demo: login to see demo