Google Maps Element - Githubissues

choptastic commented 7 years ago

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

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 commented 7 years ago

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 commented 7 years ago

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

stuart-thackray commented 7 years ago

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 commented 7 years ago

I believe in you!

Yeah, a separate demo page would be great!

nitrogen / nitrogen_core

Google Maps Element #112