Google Maps Element #112
Description
From a user:
Hope this finds fine. I am of a view if Nitrogen comes up with a Google Map element which when given Latitude and Longitude values can automatically insert a map in the nitrogen page.
Looking at the references below:-
- http://www.w3schools.com/graphics/google_maps_intro.asp %% the most important
- https://developers.google.com/maps/documentation/javascript/tutorial
- https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Also referring to the sample code below
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myLatLng = {lat: 0.347596, lng: 32.582520};
var mapOptions = {
center: myLatLng,
zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Kampala'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>
</body>
</html>I suggest if the element could take this shape
#gmap{
key, %% The key parameter contains your application's API key
title,
latitude,
longitude,
zoom,
marker, %% true | false | bouncing |
height, %% Always set the map height explicitly to define the size of the div element that contains the map.
width,
loading %% async defer
}#gmap{} may be a specialized #panel{} element with the following extra tributes from the google map API