Infowindow false positioned - google-maps-api-3

I'm quite new to Google Maps API 3 and can't figure out the following error: All clicks on my markers open the infowindow on the same marker (bad), but with different text (good).
I'm pulling the data out of wordpress custom meta data into an xml, which i then parse; What makes me wondering is the fact that generating the markers works this way, but adding the listener for the infowindow obviously fails.
Any ideas what's happening here?
Live demo at:
http://goo.gl/9seK9
Code
$(document).ready(function(){
var infowindow;
var latlng = new google.maps.LatLng(47.580231,13.771362);
var settings = {
zoom: 8,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
jQuery.get("http://rundumadum.eu/de/wp-content/themes/rud/rundumadumMap.xml", {}, function(data) {
var xmllength = $(data).find("mymarkers").children().size();
var supermarkers = [];
jQuery(data).find("mymarker").each(function() {
var myid = $(this).find("id").text();
var mytitle = $(this).find("title").text();
var mylink = $(this).find("link").text();
var mylocation = $(this).find("location").text();
var mysplits = mylocation.split(",");
var mylat = mysplits[0];
var mylng = mysplits[1];
var mylatlng = new google.maps.LatLng(parseFloat(mylat), parseFloat(mylng));
var myinfo = ""+mytitle+"";
var marker = createMyMarker(mytitle, myinfo, mylink, mylatlng);
});
});
function createMyMarker(mytitle, myinfo, mylink, mylatlng) {
marker = new google.maps.Marker({
position: mylatlng,
map: map,
clickable:true,
icon:'http://rundumadum.eu/de/wp-content/themes/rud/static/img/markerTest.png',
html: ''+mytitle+''
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: myinfo});
infowindow.open(map, marker);
});
}
return marker;
});
Would be grateful for any ideas ...

One thing I notice is that the marker you are creating in createMyMarker is not declared using var marker, so it looks like you are inadvertently creating a global marker reference. Also, it appears that the statement: return marker is actually after the end of your createMyMarker function, although that may just be a typo that was introduced when you set up your code sample in your question.
At any rate, I believe if you change the code in createMyMarker to declare the marker using var marker within that function, it will give you better results.

Related

How to disable Google Map MouseOver

I am making an aspx page to track vehicles. The only thing I am sticking with is that I don't know how to remove tooltip text from google markers.
The data is displaying correctly.
In the image above, (1) is being shown when I am taking my cursor on marker image and (2) is coming when I am clicking on the marker.
I want to hide (1). How to do that?
I am using the following code:
function initMap() {
var image = '../images/FireTruck.png';
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
Don't set the title property of the marker (that is what sets the tooltip).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title, // <<<<<<<<<<<<<<<<<< REMOVE THIS
icon: image
});

Google Maps API 3 - Type error: a is undefined

I'm attempting to dynamically load geocodes from a json file here http://debug-gotfed.admin.zope.net/bataviaeats/at/dev_remote_content
I'm getting a "Type Error: a is undefined." What am I missing?
<script type="text/javascript">
// Global
var infowindow;
var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
var infoCloseIcon = 'images/close.png';
var infoCloseMargin = '4px 4px 2px 2px';
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$.each(locations, function(i, data) {
console.log(data.geocode);
var position = new google.maps.LatLng(data.geocode);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: markers_img
});
console.log(marker);
// marker.setMap(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You are either having the firebug console open when loading the page or one of firefox extension clogging the downloading, making the browser can not get full script from google.
Solution: turn of firebug console, if that's not the case, then try disable the extensions individually see what conflict.
Just add the v3 for example as release version ,and it will work with firebug and any other extension
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
all credits goes here :
Google Maps API: TypeError: a is undefined
The google.maps.LatLng constructor takes two arguments. This is wrong:
var position = new google.maps.LatLng(data.geocode);
If data.geocode is already a google.maps.LatLng object, just use it. If it is a JSON object with lat and lng properties, then you have to pass those separately into the constructor:
var position = new google.maps.LatLng(data.geocode.lat, data.geocode.lng);
code for your specific data:
var geocode=data.geocode.split(',');
var position = new google.maps.LatLng(geocode[0],geocode[1]);
Thank you to all who answered. This is the final working code with additions for Infoboxes. I did have to turn the split geocode data into numbers. You can view this in real-time # http://gotfed.in/fredericksburg-va
<script type="text/javascript">
// Global
var map;
var infowindow;
var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
var infoCloseIcon = 'http://gotfed.in/!/assets/global_images/close.png';
var infoCloseMargin = '4px 4px 2px 2px';
bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// create markers
$.each(locations, function(i, data) {
var geocode = data.geocode.split(',');
var geo1 = parseFloat(geocode[0]);
var geo2 = parseFloat(geocode[1]);
var position = new google.maps.LatLng(geo1,geo2);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: markers_img,
title: data.business_name
});
bounds.extend(position);
var id = "info" + i;
console.log(id);
var infobox = new InfoBox({
content: document.getElementById(id),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {width: "280px"},
closeBoxMargin: infoCloseMargin,
closeBoxURL: infoCloseIcon,
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(position);
});
});
// set Bounds
map.fitBounds(bounds);
// Keep map centered
var center;
function calculateCenter() {
center = map.getCenter()
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

KML file more than 2000 placemarks

I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();

Create Marker Categories & Display Markers on Click Only

I am trying to create marker categories and display markers on click...
For example, "Eat", "Banks", "Places of Interest" and clicking on them would produce only the markers in those categories. You can see it live HERE
Here is a code snippet:
//<![CDATA[
//<![CDATA[
var map = null;
var gmarkers = [];
var gicons = [];
var icon = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(37.979183,-121.302381),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
///////////////////////// EATS //////////////////////////////////////////////
var point = new google.maps.LatLng(37.988012,-121.311901);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/tigeryogurt.jpg" /></center><br><b>Tiger Yogurt</b><small><br>4343 Pacific Avenue<br>209.952.6042<br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[0]
var point = new google.maps.LatLng(37.987054,-121.311655);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/mwbakery.jpg" /></center><br><b>M&W Bakery<br>Cakes & Sandwiches</b><small><br>4343 Pacific Avenue<br>209.473.3828<br><br>On the web visit:<br><a href="http://www.mandwdutchamericanbakery.com" target ="_blank">MandWDutchAmericanBakery.com<\/a><br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[1]
Currently, all markers display. I can easily get the markers not to display... however, i am trying to have only categories display and individual listings to display on click only!
CREATE MARKER FUNCTION:
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function triggerClick(i) {
google.maps.event.trigger(gmarkers[i],"click")
};
function createMarker(latlng, html, img) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: img,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
}
I would think the simplest way to do it would be to assign your markers to arrays, with each marker upon creation having setMarker(null). You'd either use a separate array for each category, or a single array of objects each with a category attribute. Then when the user clicks on a category you would iterate through the appropriate array and setMarker(map) for each of its markers.

Getting the LatLng from placed marker for browser fields

Tried the following scripts but the last section is not working. Help please.
// script type="text/javascript"
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(-36.624345125527526,144.96459973437504),
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false,
draggableCursor: 'crosshair',
draggingCursor: 'pointer'
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
map.panTo(position);
// not working
google.maps.event.addListener(marker, 'dragend', function() {
var point = marker.getPosition();
document.getElementById("latitude").getElementsByTagName("input")[0].value = point.lat();
document.getElementById("longitude").getElementsByTagName("input")[0].value = point.lng();
});
// end of script
Tried using the following but nothing happen after the marker is drag. Seems like the listener is not listening to the 'dragend' event of the marker. Any clue? Other option to get the latLng after dragging marker on map?
// JS code
google.maps.event.addListener(marker, 'dragend', function(e) {
var point = e.latLng;
alert(marker.e.latLng);
})
// end code
The input elements part is not a choice as the scripts sit in an embedded placeholder of a web based application. So can't change that part.
You should be using the MouseEvent object passed by the dragend event for the marker. Like this:
google.maps.event.addListener(marker, 'dragend', function(e) {
var point = e.latLng;
document.getElementById("latitude").getElementsByTagName("input")[0].value = point.lat();
document.getElementById("longitude").getElementsByTagName("input")[0].value = point.lng();
});
I also am not sure why you're not just naming your input elements and accessing them directly...something like this:
document.getElementById("latitude_input").value = point.lat();
document.getElementById("longitude_input").value = point.lng();

Resources