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 Map Marker not displaying

I've tried adding a marker variable to my Google Map API and it will not show. Any ideas why?
The website: http://www.franhaines.co.uk/paddlethewye/
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(51.843143, -2.643555),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
$("#findButton").click(findMe);}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"We are here!"
});
function findMe()
{
if (navigator.geolocation)
{
console.log(navigator.geolocation.getCurrentPosition(successCallback,errorCallback,{timeout:10000}));
}
else
{
alert("I'm afraid your browser does not support geolocation.");
}
}

the issues
myLatlng is not defined
you create the marker before the map has been created
even when the map already has been created the Map-instance(map) wouldn't be accessible in the scope where you create the marker
the geolocation-callback creates a new Map-instance, the marker will not be drawn in this instance
Fixed issues:
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
//use the button as control when you want to
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
//only set new options for the map
//instead of creating a new instance
map.setOptions(myOptions);
//when you want to
//set the viewport of the map so that it diplays both locations
map.fitBounds(bounds);
//marker for the user-location when you want to
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
//hide the button, no need for further clicks
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
Demo: http://jsfiddle.net/doktormolle/eb6kwkwg/
There is another, CSS-related issue(you may have noticed that the apperenance of the controls is distorted). For a fix see: Google Map Infowindow not showing properly

Google Map Click on link/tab to change marker location map

Is that possible to click on the other Tab 2 and the marker/location change? Click back on Tab 1 marker/location change back to first location.
[Links to Fiddle] http://jsfiddle.net/ye3x8/
function initialize() {
var styles = [{
stylers: [{
saturation: -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapProp = {
center: new google.maps.LatLng(3.165659, 101.611416),
zoom: 17,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style')
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.167244, 101.612950),
animation: google.maps.Animation.DROP,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function () {
});
}
google.maps.event.addDomListener(window, 'load', initialize);

A marker can be added to your map like so:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
The marker position can then be changed like so:
marker.setPosition(new google.maps.LatLng(lat, lon));
In order to change the position of your maker based on which tab a user selects, you could do something like:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
//When user clicks tab1:
changeMarkerPos(marker, tab1lat, tab1lon);
//When user clicks tab1:
changeMarkerPos(marker, tab2lat, tab2lon);
function changeMarkerPos(marker, lat, lon){
marker.setPosition(new google.maps.LatLng(lat, lon));
}

Create 2 markers and add 2 functions like :
<script>
function recenter() {
map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>));
map.setZoom(16);
}
function recenter2() {
map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>));
map.setZoom(16);
}
</script>
$coord[0] and $coord[1] are latitude and longitude of first marker
$coord2[0] and $coord2[1] are latitude and longitude of second marker
don't forget to add onclick function on your tabs :
onclick="recenter();"
onclick="recenter2();"

The map of Google Maps are not showing but the controls do

I'm fetching the coordinates from the URL that looks like this (part of it of course): weather/59.328676,13.485656. Now, I have extract these coordinates using a function. When I am trying to load Google Maps, the controls shows but not the actual map. You can see what I mean by clicking on this link: http://server-1.myftp.org/vadret-just.nu/weather/59.328676,13.485656. The code I'm using are this:
function url_endstring(url){
return url.substr(url.lastIndexOf('/') + 1);
}
var coordinates = url_endstring(window.location.href);
var latlng = new google.maps.LatLng(coordinates);
var map_options;
var gm_map;
var marker;
function initialize() {
latlng;
map_options = {
center: latlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
gm_map = new google.maps.Map(document.getElementById('google-maps'), map_options);
marker = new google.maps.Marker({
position: latlng,
map: gm_map
});
}
Have I missed something? How can I make the Google Maps map visible?

Google Maps v3 Terrain View By Default

I'm trying to make my google maps embed default to terrain view. Attached is my code that loads everything correctly except the map options where I set the default view to terrain. I have it set up to only limit the choices to only terrain but when you initially load the page it is on the default hybrid view.
var map, marker, latLngToPixel;
var middle_earth_MORADOR = new google.maps.LatLng(38, 0);
function initialize() {
var mapOptions = {
zoom: 2,
center: middle_earth_MORADOR,
backgroundColor: "#000",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN]
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var locations = [
// PHP LOOP FOR FEATURED PROJECTS
];
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var styledMapOptions = {
map: map,
name: "map"
}
var build = new google.maps.StyledMapType(styledMapOptions);
map.mapTypes.set('map', build);
map.setMapTypeId('map');
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'http://staging.******.com/css/images/pin.png',
map: map,
});
marker.setAnimation(google.maps.Animation.DROP);
setTimeout(function(){ marker.setAnimation(null); }, 1750);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location = "http://staging.******.com/projects/" + locations[i][4];
}
})(marker, i));
}
}

I think you can disable the default UI of map by setting the property disableDefaultUI to true, and then set in the options the TERRAIN as the mapTypeId as how I did it below:
function loadMap() {
var myLatlng = new google.maps.LatLng(lat,lan);
var myOptions = {
zoom: 3,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//code
}

const map = new window.google.maps.Map(document.getElementById('Map'), {
mapTypeId: 'terrain'
});