I am wondering it is possible to create a working Google map in a virtual element which can then be pasted into any page at any time.
So here is my JS when targeting an element which already exists on the page.
var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);
var mapOptions = {
zoom: 16,
center: mapLatLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($('#map_canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
'<div id="bodyContent">'+
'<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
'<p>+44 (0)20 3137 7034</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: markerLatlng,
map: map,
title: 'BrocklebankPenn'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
What I want to do is something like this:
this.mapCanvas = document.createElement('div');
this.mapCanvas.setAttribute('id', 'map_canvas');
var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);
var mapOptions = {
zoom: 16,
center: mapLatLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($(this.mapCanvas), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
'<div id="bodyContent">'+
'<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
'<p>+44 (0)20 3137 7034</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: markerLatlng,
map: map,
title: 'BrocklebankPenn'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
this.$el.html(this.mapCanvas);
Basically the exact same thing but with a variable
instead of #map_canvas
, I have taken this approach with JS in the past but it does not seem to be working for Google maps, I get the following error:
Uncaught TypeError: Cannot set property 'position' of undefined
Which I am not sure of.
If anyone can help that would be awesome.
Cheers,
Luke.