We Keep Coding

Generate google map error

I have the following script which supposed to generate a basic google map:
$(document).ready(function(){
var weatherAPP = {
generateMap: function(){
console.log('called');
var mapHolder = document.getElementById('#map');
var mapOptions = {
center: new google.maps.LatLng(51.5072, 0.1275),
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapHolder, mapOptions);
}
};
weatherAPP.generateMap();
});
console.log('called') gets called fine.
I have included the following scripts in order:
google maps api
jquery
script
However I am getting the following error:
Uncaught TypeError: Cannot read property 'offsetWidth' of null

Since your element is: <section id="map"></section>
var mapHolder = document.getElementById('#map');
should be
var mapHolder = document.getElementById('map');
You must have confused it with jQuery or CSS in where you declare ids with the prefix #.
In document.getElementById you have to put the elements ID as it is with no prefix at all

I is happening because you have # in getElementById('#map');
If you remove the # it will work :)
http://jsfiddle.net/zbyqoaju/1/
var weatherAPP = {
generateMap: function () {
console.log('called');
var mapHolder = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.5072, 0.1275),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapHolder, mapOptions);
}
};
weatherAPP.generateMap();

Adding Google Maps with KnockoutJS

I have following part in my html file.
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDwsTgxJyu7KG7BPM3q54mgjSHl1imLnCM&sensor=false">
</script>
<script type="text/javascript">
$(function () {
require(["Work/AddCiniViewModel"], function (model) {
addCiniViewModel = new model();
addCiniViewModel.createMap();
ko.applyBindings(addCiniViewModel, document.getElementById("AddCiniForm"));
}
});
I have following part in my ViewModel file.
self.map;
self.Lng = ko.observable(12.24);
self.Lat = ko.observable(24.54);
self.createMap = function () {
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(12.24, 24.54),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
}
ko.bindingHandlers.map = {
init: function (element, valueAccessor, allBindingsAccessor, addCiniViewModel) {
var position = new google.maps.LatLng(allBindingsAccessor().latitude(),
allBindingsAccessor().longitude());
var marker = new google.maps.Marker({
map: allBindingsAccessor().map,
position: position,
title: name
});
self._mapMarker = marker;
},
update: function (element, valueAccessor, allBindingsAccessor, addCiniViewModel) {
var latlng = new google.maps.LatLng(allBindingsAccessor().latitude(), allBindingsAccessor().longitude());
self._mapMarker.setPosition(latlng);
}
};
And I would like to see google maps and its lat long values in the following div.
<div id="map"></div>
<input data-bind="value: Lat" />
<input data-bind="value: Lng" />
<div data-bind=" style: style:{width:'300px',height:'300px'},
latitude: addCiniViewModel.Lat, longitude:addCiniViewModel.Lng, map:map">
</div>
When I run this code. I got this message in firebug.
google.maps.LatLng is not a constructor
What's wrong? How can i solve this problem?

The Google Maps API javascript is loading asynchronously while execution of your code is continuing. Your code then uses the Maps API before it is available.
To wait for the Maps API you can wrap your ko.applyBindings call inside a jQuery onload event handler
$(window).load(function() {
ko.applyBindings(addCiniViewModel, document.getElementById("AddCiniForm"));
});
Here is another example from Google on how to wait for the maps API before initializing code that uses it: https://developers.google.com/maps/documentation/javascript/tutorial

How to bind google maps using HotTowel?

I am trying to show a simple map in HotTowel.
In home.html page I have that:
<section>
<div id="map-canvas" data-bind="map: map"></div>
</section>
In home.js I have that:
define(['services/logger'], function (logger) {
var vm = {
activate: activate,
title: 'Home View',
map: map
};
return vm;
function activate() {
google.maps.event.addDomListener(window, 'load', initialize);
logger.log('Home View Activated', null, 'home', true);
return true;
}
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});
How to bind model with view to show map?

EDIT**
The below answer was for Durandal 1.2. In durandal 2.0 the viewAttached event was renamed to attached. You can read Durandals documentation about it here.
Durandal has a viewAttached event that is called on your viewmodel once the view has been databound and attached to the dom. That would be a good place to call the google maps api.
define(['services/logger'], function (logger) {
var vm = {
viewAttached: initialize
title: 'Home View',
map: map
};
return vm;
var map;
function initialize(view) {
logger.log('Home View Activated', null, 'home', true);
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});
EDIT AGAIN to address peoples comments**
As per Jamie Hammond's comment it is a better practice to scope your DOM transversal to the view that's being attached. If the DOM element is apart of the view.
So, inside your viewAttached (in durandal 1.2) or attached (in durandal 2.0) you would:
var map;
var mapOptions = { /*map options*/ };
var vm = {
attached: function (view) {
var mapCanvas = $('#map-canvas', view).get(0);
map = new google.maps.Map(mapCanvas, mapOptions);
}
}
I haven't messed with Durandal 2.0 at all because I've been pretty busy with work and stuff and when I was messing around with Durandal 1.0 it was just for fun but I do love the framework and hope to one day get to play with 2.0. With that said I did have an issue with generating a map in the viewattached in Durandal 1.0. But, I wasn't using Google maps. I was using Leafletjs. My solution to the problem was creating a delay in the viewAttached that would redraw the map after a short delay. This was because Durandal's transitioning in the view was not working well with leaflets ability to draw the map in the dom element as it was flying and fading in.
So, inside the viewAttached I would draw the map like so:
window.setTimeout(drawMap, 10);
Again, this was a very specific problem I had and not a problem with Durandal. This was more of a problem with Leafletjs not rendering the map correctly when the DOM element was still transitioning in.

Evan,
I'm also trying to get this working but no joy.
I have my html as and viewmodel exactly as you have, and I know the viewAttached composition is being called because I'm getting my logger event - but no map!
The only other thing I can think of is where you call your googlemaps from? I'm doing in in my index.html are you doing the same?
Regards

BrettH,
For me, the problem was that the height was 0px. My module that works looks like this:
define(['plugins/router', 'knockout', 'plugins/utility'], function (router, ko, utility) {
var vm = { };
vm.map = undefined;
vm.compositionComplete = function () {
var myLatlng = new google.maps.LatLng(29.4000, 69.1833);
var mapOptions = {
zoom: 6,
center: myLatlng
}
vm.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://www.visualtravelguide.com/Pakistan-Islamabad.kmz'
});
georssLayer.setMap(vm.map);
utility.resizeElementHeight(document.getElementById('map-canvas'), 10);
$(window).resize(function () {
utility.resizeElementHeight(document.getElementById('map-canvas'), 10);
});
};
return vm;
});
My utility module looks like this:
define(['jquery','knockout'], function ($,ko) {
return {
//resizes an element so height goes to bottom of screen, got this from a stack overflow
//usage:
// resizeElementHeight(document.getElementById('projectSelectDiv'));
//$(window).resize(function () {
// resizeElementHeight(document.getElementById('projectSelectDiv'));
//});
//adjustpixels is an optional parameter if you want to leave room at the bottom
resizeElementHeight: function (element,adjustPixels) {
var height = 0;
var adjust = 0;
if (adjustPixels != undefined)
adjust = adjustPixels;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop-adjust) + "px");
},
//looks up name by id, returns blank string if not found
//pass in a list and an id (they can be observables)
LookupNameById: function (l, wId) {
var list = ko.utils.unwrapObservable(l);
var id = ko.utils.unwrapObservable(wId);
var name = '';
$.each(list, function (key, value) {
if (value.Id() == id)
name = value.Name();
});
return name;
},
//sets the widths of the columns of headertable to those of basetable
setHeaderTableWidth: function (headertableid,basetableid) {
$("#"+headertableid).width($("#"+basetableid).width());
$("#"+headertableid+" tr th").each(function (i) {
$(this).width($($("#"+basetableid+" tr:first td")[i]).width());
});
$("#" + headertableid + " tr td").each(function (i) {
$(this).width($($("#" + basetableid + " tr:first td")[i]).width());
});
}
};
});
Hope this helps you.

first go to your main.js and add 'async': '../Scripts/async',
require.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'mapping': '../Scripts/knockout.mapping-latest',
'async': '../Scripts/async',
'transitions': '../Scripts/durandal/transitions'
},
shim: { mapping: { deps: ['knockout'] } }
});
notice that we need to add async.js in the scripts folder so go to Download async.js download the file and save it in hottowel script folder as async.js
the in the main.js add this
// convert Google Maps into an AMD module
define('gmaps', ['async!http://maps.google.com/maps/api/js?v=3&sensor=false'],
function(){
// return the gmaps namespace for brevity
return window.google.maps;
});
in any viewmodel you can now use it like this
define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'gmaps'], function (router, ko, logger, app, gmaps) {
i hope this will help:

"a is null" even after Google map is successfully loaded

I have a set of jQuery UI tabs that each load project.php using ajax. Depending on the parameters passed to the script, a different Google map is displayed using the following JavaScript inside project.php:
var tab_index = $('#tabs').tabs('option', 'selected');
$('.site_map:visible').css('height','300px');
MapID = $('.site_map:visible').attr('id');
if (MapID !== 'map-new'){
var map_id = 'map-'+tab_index;
$('.site_map:visible').attr('id', map_id);
} else {
MapNewSite();
}
var latlng = new google.maps.LatLng(19,-70.4);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-" + tab_index), myOptions);
arrInfoWindows[tab_index] = new google.maps.InfoWindow();
placeMarker($('.site_details:visible .inpLat').val(), $('.site_details:visible .inpLng').val(), tab_index);
function MapNewSite(){
arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-new"), myOptions);
placeMarker(19,-70.4,tab_index);
arrInfoWindows[tab_index] = new google.maps.InfoWindow();
}
Each map loaded using parameters returned by a query of my database loads without any problems. However, in one last instance, I load project.php in a tab without any parameters so as to have a blank tab for users to manipulate. The signal that the map is not to be loaded using database coordinates is that the id of its div is "map-new".
The map generated in this tab loads, but then gives me the "a is null" error which usually means it couldn't find a div with the id specified to initialize the map. What is causing this error even after the map has loaded? How do I stop the error from occurring?
Here is the JavaScript in the parent page containing the tab site:
var arrMaps = {};
var arrInfoWindows = {};
var arrMarkers = {};
function placeMarker(lat, lng, tab_index){
map = arrMaps[tab_index];
var bounds = new google.maps.LatLngBounds();
var latlng = new google.maps.LatLng(
parseFloat(lat),
parseFloat(lng)
);
bounds.extend(latlng);
createMarker(latlng, tab_index);
map.fitBounds(bounds);
zoomChangeBoundsListener =
google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom()){
this.setZoom(10);
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
}
function createMarker(latlng, tab_index) {
var html = 'Click here to move marker';
arrMarkers[tab_index] = new google.maps.Marker({
map: arrMaps[tab_index],
position: latlng
});
arrInfoWindows[tab_index] = new google.maps.InfoWindow();
google.maps.event.addListener(arrMarkers[tab_index], 'click', function() {
arrInfoWindows[tab_index].setContent(html);
arrInfoWindows[tab_index].open(arrMaps[tab_index], arrMarkers[tab_index]);
});
}
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
},
cache: true
});
});

Take a look to http://www.pittss.lv/jquery/gomap/. Easy to use and very powerful. I myself use it.

It turns out I was accidentally initializing the map both inside the if and outside of it.

google maps api v3 marker click not working

not sure where the problem lies with this, i created a google map with custom markers a few months back using v3 of the api. the info windows were working back then.
i have been porting it onto a new site and cant get the info window to open, the js alerts in the right point when creating the click event but the click event does not fire all i can do is drag the map, so i looked at the last site i did, and its not working there either now.
so not sure how to fix this, the code i have to create ther info window is as follows:
markersArray.push(marker);
markersPosArray.push(myLatLng);
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(myData, marker) {
alert('creating listener for: '+marker);
// Creating the event listener. It now has access to the values of
// myData and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
//create thecontent for the infowindow
alert('creating info window');
var content = 'hello there'; //createContent(myData);
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(myData, marker);
maybe something has changed in the api that i am unaware off?
the testpage can be seen at: http://www.disposalknowhow.com/locator.php
In the locator use the following to obtain results:
type: electrical/electronics - item: computers - radius: 100 - postcode: n11hl
the previous one i did that is not working either now can be seen at: http://www.focus-on-plants.com/locator_iconed.php
(can use any parameters here in the form)
UPDATE:
in reply to treffys answer:
the infowindow is defined when i create the map:
var myLatLng = new google.maps.LatLng(51.470, -0.00);
var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var gotIcons = false;
var iconImageArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShadowArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShapeArray = {poly:{}, coord:{}};
var myIconArray = {icon:{}, shadow:{}, shape:{}}
var infowindow = new google.maps.InfoWindow();
var markersArray = []; // to store out markers
var markersPosArray = []; // to store lat/lang of markers for zooming function
var markersInfoArray = [];
// MAP OPTIONS
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};//end map options
var map = new google.maps.Map(document.getElementById("loc_map"), myOptions);

I am using the following code to display an info bubble:
var info_pane = new google.maps.InfoWindow({
content: info,
disableAutoPan: false,
maxWidth: '300px'
});
info_pane.open(map, marker);