Photo Gallery Forums

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

<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

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

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Posted: **12 Sep 2018, 12:16**

It worked like that, thanks Karl!
Best, G

Posted: **12 Sep 2018, 14:46**

Hi GeoPal,

I think you've got a typo... on your site you spelled 'Contacts' as 'Contatcs'.

Posted: **12 Sep 2018, 16:10**

Hi Martin, you are right! Corrected, thank you!

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

Posted: **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.

Posted: **14 Sep 2018, 03:06**

Ok, thanks!

Posted: **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]

function x3_load_page(){
 if($('#map').length) mymap();
}

Custom <head> [html]

<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

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

Posted: **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.

Photo Gallery Forums

Google maps API

Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API

Re: Google maps API