Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Google Maps Element #112

Open
choptastic opened this issue Nov 7, 2016 · 4 comments
Open

Google Maps Element #112

choptastic opened this issue Nov 7, 2016 · 4 comments

Comments

@choptastic
Copy link
Member

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:-

  1. http://www.w3schools.com/graphics/google_maps_intro.asp %% the most important
  2. https://developers.google.com/maps/documentation/javascript/tutorial
  3. 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
@stuart-thackray
Copy link
Contributor

I have also wanted; or thought at looking for this features; would you like a PR to add it?
(Asking as don't want to do something you have started/done)

@choptastic
Copy link
Member Author

choptastic commented Nov 7, 2016 •
edited
Loading

I have not started this, so if you wanted to do it, that'd be awesome!

@stuart-thackray
Copy link
Contributor

will look at adding this (would be learning experience regarding JS); would you like a separate demo page like Recaptchaha if I am successful?

@choptastic
Copy link
Member Author

I believe in you!

Yeah, a separate demo page would be great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@choptastic @stuart-thackray