Develop Reference

Once again: TypeError: a.lat is not a function in google maps api

In our web application we have a window showing the location of our club bureau. Is is working fine except the marker window does not show up. The click produces the dreaded java script error "TypeError: a.lat is not a function".
Looking at other answers to this kind of problem I realized, the coordinates have to be a google.maps.LatLng object or literal. I'm almost convinced I comply with this:
var map = null;
// Call this function when the page has been loaded
function initialize()
{
if (arguments.callee.done) return;
arguments.callee.done = true;
var
coord = { lat: 49.87216, lng: 8.63064 },
mapOptions = {
center: coord,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 1,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scaleControl: 1,
scaleControlOptions: {style: google.maps.ScaleControlStyle.DEFAULT, position: google.maps.ControlPosition.BOTTOM_RIGHT},
navigationControl: 1,
navigationControlOptions: {style: google.maps.ZoomControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.RIGHT},
position: google.maps.ControlPosition.BOTTOM_LEFT
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker = new google.maps.Marker({
title: "Fahrradbüro",
position: coord,
map: map
});
kartenFenster = new google.maps.InfoWindow(
{
content: '<div style="text-align: center"><img src="/static/images/images" alt="Fahrradbüro"/><br/>Fahrradbüro<br /></div>'
});
marker.addListener('click', function() {
kartenFenster.open(map, marker);
});
}
But I still get this error. What am I missing here? I have even tried:
var coord = new google.maps.LatLng( 49.87216, 8.63064 );
Thanks for your help!

Remove this from the end of mapOptions:
position: google.maps.ControlPosition.BOTTOM_LEFT
The API also tries to access a position-property of map in open() (note that the first argument of open() also may be a StreetViewPanorama, which does have a position-property)what results in the error(because this property is not a LatLng).

var map;
// Call this function when the page has been loaded
function initialize()
{
if (arguments.callee.done) return;
arguments.callee.done = true;
var coord = new google.maps.LatLng( 49.87216, 8.63064 );
var mapOptions = {
center: coord,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 1,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scaleControl: 1,
scaleControlOptions: {style: google.maps.ScaleControlStyle.DEFAULT, position: google.maps.ControlPosition.BOTTOM_RIGHT},
navigationControl: 1,
navigationControlOptions: {style: google.maps.ZoomControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.RIGHT},
position: google.maps.ControlPosition.BOTTOM_LEFT
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker = new google.maps.Marker({
title: "Fahrradbüro",
position: coord,
map: map
});
kartenFenster = new google.maps.InfoWindow(
{
content: '<div style="text-align: center"><img src="/static/images/images" alt="Fahrradbüro"/><br/>Fahrradbüro<br /></div>'
});
marker.addListener('click', function() {
kartenFenster.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load',initialize);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map" style="height:300px;width:400px"></div>
Please check snippet.I have added div with id = "map" and few changes of coordinates and js.

Google Maps label

I have the following code that creates a marker on Google Maps:
function initializeMap() {
var lat = '-32.089608'; //Set your latitude.
var lon = '115.933216'; //Set your longitude.
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
I would like to add custom text to the pointer above the default marker but I cannot work out how to do it. At the moment it displays a small empty box above the default marker. (I am unable to post an example image due to lack of reputation points.
I am not very experienced with coding so any help is appreciated.
Thank you

You only need add content into your infowindow:
var infowindow = new google.maps.InfoWindow({
content: 'abcxyz'
});

I doubt the standard library supports this.
But you can use the google maps utility library:
https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here:
https://developers.google.com/maps/documentation/javascript/overlays#Markers
Google Maps API v3 marker with label

You only need to edit your marker click event function as below.
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
infoWindow.setContent('abcdxyz'); // add this line to your existing code
});
With this you can deal with multiple infoWindow for multiple markers.
Also if you want to display contents on mouseover, then you can use title property of marker like:
var marker = new google.maps.Marker({
position: {lat:lat, lng:lng},
map: map,
title: 'abcXYZ' // this will be displayed on marker mousover
});

Google Maps change icon when I click one button

I need to create an interactive map that change markers (my map have 3 markers) when an user click on an external button
For example the map is this when you open the site:
When you click button 1, change only the icon like in this photo
Can you help me with the javascript code? :)
This is my HTML code
<div id="mapMeteo"></div>
<br>
<button id="btn1">Bottone1</button> <button id="btn2">Bottone2</button> <button id="btn3">Bottone3</button>
This is the javascript code for google:
<script>
function initialize() {
//Marker personalizzato
var imageMM = 'images/markerMM.png';
imageMMM = 'images/markerMMM.png';
imageMC = 'images/markerMC.png';
//mappa Meteo
var mapMeteo = document.getElementById('mapMeteo');
var Latlng = new google.maps.LatLng(42.9254851, 13.8632125);
var mapMOptions = {
center: Latlng,
zoom: 12,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapM = new google.maps.Map(mapMeteo, mapMOptions);
//Marker 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(42.9547985, 13.958793),
map: mapM,
icon: imageMMM
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(42.9222113, 13.9199294),
map: mapM,
icon: imageMM
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(42.8832739, 13.9438162),
map: mapM,
icon: imageMC
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
and this is my jquery code but doesn't change the icon
$("#btn1").click(function(){
google.maps.event.addListener(marker1, 'click', function() {
marker1.setIcon(imageMM);
infowindow.open(mapM);
});
});

You can use a dom listener and the setIcon method of the Marker class.
https://developers.google.com/maps/documentation/javascript/reference#methods_48
For example:
var btn1 = document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function() {
marker1.setIcon(imageMC);
});
JSFiddle demo

change colour on infoWnd close google maps api

I want to my pin to change color when I click on it in google maps.
I have the below code, the color changes but I want it to revert back to the original when the infowindow is closed. see fiddle
Where am I going wrong here?
<div id="map_canvas"></div>
var mylatlongs = [
{"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
{"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
{"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
];
var infowindow = null;
jQuery(function() {
var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
var mapOptions = {
center: StartLatLng,
streetViewControl: false,
panControl: false,
maxZoom:17,
zoom : 13,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
jQuery.each( mylatlongs, function(i, m) {
var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(m.lat, m.lng),
bounds: true,
id : 'mk_' + m.rank,
letter : m.index,
map: map,
title: m.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map,marker);
marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
'<div id="bodyContent">'+ (m.rank) +
'</div>'+
'</div>';
});
});
#map_canvas {
float: left;
height: 565px;
width: 100%;
}
#content {
min-width: 320px;
}

You don't track which marker has infowindow open. One possible solution is to add global variable which will contain information about marker with opened infowindow:
var infowindow = null;
var markerRed;
And change icon to red color when marker is clicked:
google.maps.event.addListener(marker, 'click', function() {
if (markerRed) {
markerRed.setIcon('https://www.google.com/mapfiles/marker.png');
}
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map,marker);
marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
markerRed = marker;
});
Update: icon change on close of infowindow:
var infowindow = new google.maps.InfoWindow({
content: ''
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
if (markerRed) {
markerRed.setIcon('https://www.google.com/mapfiles/marker.png');
}
});

latlng function argument

My main goal with the program in question is to generate a Google map that shows the location of a specific building.
Due to Google limitation reasons, I have generated and stored all latitudes and longitudes for all the buildings that I analyze in a MS SQL database(it is a real estate web site). Everytime one building is selected then I retreive its corresponding latitud and longitude and store it in two asp:Label's. I use a script in Javascript in order to process the latitud and longitud which are passed on via two asp:Label's. My problem is that for some reason the LatLng function does not seem to work property and my maps do not show the coordinates that they should. I think I may have a problem with the type of variable that LatLng is expecting. I have tried both, default string that is passed on and converting the variables to real type. Here is the script. Any help or suggestions are appreciated:
<script type="text/javascript">
(function () {
// Defining global variables
var map, geocoder, marker, infowindow, propertyaddress, selectedbuilding, maplatitude, maplongitude, buildinglatlng, latlng, myOptions;
function InitializeMap() {
//propertyaddress = '400 Alton Road, Miami Beach, FL 33139';
propertyaddress = document.getElementById('<%=lblselectedHiddenBuildingAddress.ClientID%>').innerText;
selectedbuilding = document.getElementById('<%=lblMainBuilding.ClientID%>').innerText;
//maplatitude = parseFloat(document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText);
//maplongitude = parseFloat(document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText);
maplatitude = document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText;
maplongitude = document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText;
buildinglatlng = new google.maps.LatLng(maplatitude, maplongitude);
//window.alert("Processed propertyaddress");
//latlng = new google.maps.LatLng(25.76804, -80.132743);
// Creating an object literal containing the properties
// we want to pass to the map
myOptions = {
zoom: 15,
center: new google.maps.LatLng(maplatitude, maplongitude),
//center: buildinglatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};
// Creating the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
})();
</script>
#
Added Code that Works but uses the geocoder
#
For instance the following code works perfectly but it uses the geocoder. Passing the variables is not a problem. There is something strange with LatLng and what it does with the variables passed. It does get the values with all the significant places though.
<script type="text/javascript">
(function () {
// Defining global variables
var map, geocoder, marker, infowindow, propertyaddress, selectedbuilding, maplatitude, maplongitude, buildinglatlng, latlng, myOptions;
function InitializeMap() {
//propertyaddress = '400 Alton Road, Miami Beach, FL 33139';
propertyaddress = document.getElementById('<%=lblselectedHiddenBuildingAddress.ClientID%>').innerText;
selectedbuilding = document.getElementById('<%=lblMainBuilding.ClientID%>').innerText;
//maplatitude = parseFloat(document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText);
//maplongitude = parseFloat(document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText);
maplatitude = document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText;
maplongitude = document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText;
buildinglatlng = new google.maps.LatLng(maplatitude, maplongitude);
//window.alert("Processed propertyaddress");
//latlng = new google.maps.LatLng(25.76804, -80.132743);
if (!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: propertyaddress
}
geocoder.geocode(geocoderRequest, function (results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
//map.setCenter(results[0].geometry.location);
// Creating an object literal containing the properties
// we want to pass to the map
myOptions = {
zoom: 15,
//center: new google.maps.LatLng(maplatitude, maplongitude),
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};
// Creating the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Check to see if we've already got a Marker object
if (!marker) {
// Creating a new marker and adding it to the map
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
// Setting the position of the marker to the returned location
marker.setPosition(results[0].geometry.location);
// Check to see if we've already got an InfoWindow object
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
// Creating a new InfoWindow
infowindow = new google.maps.InfoWindow();
}
// Creating the content of the InfoWindow to the address
// and the returned position
var content = '<h2>' + selectedbuilding + '</h2>';
//content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
//content += 'Lng: ' + results[0].geometry.location.lng();
// Adding the content to the InfoWindow
infowindow.setContent(content);
// Opening the InfoWindow
infowindow.open(map, marker);
});
// Triggering the click event
google.maps.event.trigger(marker, 'click');
};
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
window.onload = InitializeMap;
})();
</script>
Regards,
Elias

Have you verified that maplatitude and maplongitude contain the values you expect (eg. with a debugger)?
Is there any correlation between the expected location and the actual location shown on the map (for example, if the building is at N21.7684, and the marker is placed at N21.0000, the decimal places may have been lost).

I just found a post from Google where they changed the LatLng function and now you have to CAST the two parameters with NUMBER(). They claim that people were passing strings to the LatLng function and that created unpredicatable results. So I have appended my new code with the changes ... It only took three days to find this fix!!!! :-( I wonder why more people are not running into this. Here is the code:
<script type="text/javascript">
(function () {
// Defining global variables
var map, geocoder, marker, infowindow, propertyaddress, selectedbuilding, maplatitude, maplongitude, buildinglatlng, latlng, myOptions;
function InitializeMap() {
//propertyaddress = '400 Alton Road, Miami Beach, FL 33139';
propertyaddress = document.getElementById('<%=lblselectedHiddenBuildingAddress.ClientID%>').innerText;
selectedbuilding = document.getElementById('<%=lblMainBuilding.ClientID%>').innerText;
//maplatitude = parseFloat(document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText);
//maplongitude = parseFloat(document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText);
maplatitude = document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText;
maplongitude = document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText;
buildinglatlng = new google.maps.LatLng(Number(maplatitude), Number(maplongitude));
//window.alert("Processed propertyaddress");
myOptions = {
zoom: 15,
center: new google.maps.LatLng(Number(maplatitude), Number(maplongitude)),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};
// Creating the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Check to see if we've already got a Marker object
if (!marker) {
// Creating a new marker and adding it to the map
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
// Setting the position of the marker to the returned location
marker.setPosition(buildinglatlng);
// Check to see if we've already got an InfoWindow object
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
// Creating a new InfoWindow
infowindow = new google.maps.InfoWindow();
}
// Creating the content of the InfoWindow to the address
// and the returned position
var content = '<h2>' + selectedbuilding + '</h2>';
// Adding the content to the InfoWindow
infowindow.setContent(content);
// Opening the InfoWindow
infowindow.open(map, marker);
});
// Triggering the click event
google.maps.event.trigger(marker, 'click');
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
window.onload = InitializeMap;
})();
</script>