Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 203
Joined: 20 Dec 2007, 12:56

Google maps API

12 Sep 2018, 05:46

Hi Karl,
Some time ago with your extensive help we were able to setup a custom google map for the address of the office.
Now google displays for development only.
https://studiocreative.bg/en/contact/
This is the code:
Code
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>       
<script type="text/javascript">
    function mymap() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 15,

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(42.677711, 23.289594), // New York

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
               styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":-100},{"gamma":0.5}]}]
        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);


        // Let's also add a marker while we're at it
   
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(42.677711, 23.289594),
            map: map,
            title: 'Studio Creative',
            icon: 'http://studiocreative.bg//marker3.png'
        });
    }
</script>

We have now enabled billing and got the API key. Do you have any idea where to put it and in what form? 
Thanks in advance, G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11671
Joined: 30 Sep 2006, 03:37

Re: Google maps API

12 Sep 2018, 10:56

I haven't worked specifically with the Google Maps javascript API, but according to the below link, the api key should be in the JS script URL:
https://developers.google.com/maps/docu ... et-api-key
Code
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 203
Joined: 20 Dec 2007, 12:56

Re: Google maps API

12 Sep 2018, 12:16

It worked like that, thanks Karl!
Best, G
 
User avatar
Martin
Experienced
Posts: 633
Joined: 30 Jan 2011, 23:24

Re: Google maps API

12 Sep 2018, 14:46

Hi GeoPal,

I think you've got a typo... on your site you spelled 'Contacts' as 'Contatcs'.
ImageImage
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 203
Joined: 20 Dec 2007, 12:56

Re: Google maps API

12 Sep 2018, 16:10

Hi Martin, you are right! Corrected, thank you!
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 203
Joined: 20 Dec 2007, 12:56

Re: Google maps API

13 Sep 2018, 07:53

Hi Karl,
Just a quick one, the map fanction of the pro gallery, will it need Google API key again?!
Best, G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11671
Joined: 30 Sep 2006, 03:37

Re: Google maps API

14 Sep 2018, 01:09

GeoPal wrote:Just a quick one, the map fanction of the pro gallery, will it need Google API key again?!
We use our own API key for the X3 map functions.
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 203
Joined: 20 Dec 2007, 12:56

Re: Google maps API

14 Sep 2018, 03:06

Ok, thanks!
 
User avatar
npn
Posts: 1
Joined: 09 Dec 2018, 19:39

Re: Google maps API

09 Jan 2019, 13:55

Hello Karl. Thanks in advance.
I am trying unsuccessfully to insert 4 custom google maps in x3. With quite limited knowledge I have been able to make only the first appear following instructions of the forum but I can not see the next three. My intuition is not enough and I write to you asking for help. thanks again. I copy the way that one appears by centralizing the information that I was reading here.

Custom Javascript [JS]
Code
function x3_load_page(){
 if($('#map').length) mymap();
}
Custom <head> [html]
Code
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap" type="text/javascript"></script>
<script type="text/javascript">
    function mymap() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 11,

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(40.6700, -73.9400), // New York


 styles: [
    {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "weight": 1
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "weight": 0.8
            }
        ]
    },
    {
        "featureType": "landscape",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "water",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#000000"
            }
        ]
    },
    {
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    }
]
   
        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
//
//
        // Let's also add a marker while we're at it
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.6700, -73.9400),
            map: map,
            title: ''
        });
    }
</script>
Content 

Code
<ul class='small-block-grid-1 medium-block-grid-4 large-block-grid-4'>
<li>
<div id="map" class="flex-video x3-style-frame"style='height:auto;'>
</div>
</li>
</ul>
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11671
Joined: 30 Sep 2006, 03:37

Re: Google maps API

10 Jan 2019, 00:59

So, at least the first one works correctly? Looking at your Javascript, it seems like the code simply runs on one element ... You can't really have duplicate id's map in a document anyway, so likely you would have to change it to class="mymap" instead. And then loop through the "mymap" items to apply the code. Do you have panel login for me so I can take a look? I'm not sure I can solve it blindly. In your html, I only see one ID also ... How does it create three maps?

If you want, please send panel login in PM.