i want to add the InfoWindow in my code but it's not working. Map is showing perfectly but when i click the markers on map InfoWindow is not appearing. I also want to get the time in InfoWindow from MYSQL database. Please tell me how can i do this and what is the problem my InfoWindow is not appearing. Here is my InfoWindow Code:
var infowindow = new google.maps.InfoWindow();
var contentString = 'content';
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.addDomListener(window,'load',window.onload);
Marker:
var marker = new google.maps.Marker({position: markerpos,
map: map, icon: icon
});
Please refer the link below.
http://jsfiddle.net/RJPKJ/1/
for (i = 0; i < 5; i++){
var dataProperty = dataitem.property[i];
latitudetest =dataProperty.latitude;
longitudetest = dataProperty.longitude;
var data= dataProperty.property_title;
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
}
Related
in an app building environment I'm trying to use this code:
var map = new Appery('googlemap').gmap;
var markerLatLng = new google.maps.LatLng(localStorage.getItem("markerLat"), localStorage.getItem("markerLng"));
var Titolo = 'Some Title';
var markers = [];
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: Titolo,
animation: google.maps.Animation.DROP
});
markers.push(marker);
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
google.maps.event.addListener(marker, 'click', function() {markers.pop();
map.refresh();
setAllMap(map);
});
but it doesn't works. Could anyone say me why? I just want to remove the last marker that the user made by clicking on any marker she/he wants.
Thank you
Removing the marker object from the array will not remove the marker from the map. You have to call setMap(null) on the marker to do so. Just do markers[markers.length -1].setMap(null) and then pop() on the array;
I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.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("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);
This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file.
Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
// just create one infowindow without any content in it
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
// add an event listener for this marker
google.maps.event.addListener(marker , 'click', function() {
// assuming you have some content in a field called Field123
infowindow.setContent(markers[i].getAttribute("Field123"));
infowindow.open(map, this);
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks