Problems with Google Maps

[raulyjo]

Hi guys, I have a new problem with my google maps and I was reading that is because of a new API Key, but im not really good with this theme. I was reading that I have to create a new API key of google maps and insert it on my website, but I dont know where I have to insert (im not really good with Javascript)

In my code I have a Javascript doc with this lines :

    //Google Map
    var latitude = $('#google-map').data('latitude');
    var longitude = $('#google-map').data('longitude');
    function initialize_map() {
        var myLatlng = new google.maps.LatLng(latitude,longitude);
        var mapOptions = {
            zoom: 14,
            scrollwheel: false,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize_map);

And in HTML code, I have this: 

<section id="contact">
        <div id="google-map" style="height:650px" data-latitude="39.4576737" data-longitude="-0.3628944,14"></div>
        <div class="container-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-sm-offset-8">
                        <div class="contact-form">
                            <h3 class="letravidesil">Contacto</h3>

                            <address>
                              <strong>Videsil S.L.</strong><br>
                              C/ Nino Bravo, 5, 46812 <br>
                              Ayelo de Malferit, Valencia <br>
                              <abbr title="Phone"></abbr> (+34) 96 236 0123
                            </address>

          

Otherwise, in the console of the browser appear this error --> Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

Can anybody helps me? 

Sorry for my bad english 

 

[adrian]

If you're using ryan's MapMarker module (http://modules.processwire.com/modules/fieldtype-map-marker/) you can add the API key in the module config settings. If not, this page explains how to add it when you manually add the script: https://developers.google.com/maps/documentation/javascript/get-api-key

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

[raulyjo]

24 minutes ago, adrian said:

If you're using ryan's MapMarker module (http://modules.processwire.com/modules/fieldtype-map-marker/) you can add the API key in the module config settings. If not, this page explains how to add it when you manually add the script: https://developers.google.com/maps/documentation/javascript/get-api-key

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

But where I have to put this code? inside of the html page?

By the way, im not using  ryan's MapMarker module

[adrian]

2 minutes ago, raulyjo said:

But where I have to put this code? inside of the html page?

Take a look at the Google maps example pages: https://developers.google.com/maps/documentation/javascript/examples/map-simple

Remember that with PW your template files are what is used to output the HTML. It depends on how you have your template structure/logic setup - Direct vs delayed output. They key thing is to have the script output on the page where the maps needs to be displayed.

I still think it would be easier for you to use that MapMarker module I linked to - it will take care of all of this for you!

[raulyjo]

56 minutes ago, adrian said:

Take a look at the Google maps example pages: https://developers.google.com/maps/documentation/javascript/examples/map-simple

Remember that with PW your template files are what is used to output the HTML. It depends on how you have your template structure/logic setup - Direct vs delayed output. They key thing is to have the script output on the page where the maps needs to be displayed.

I still think it would be easier for you to use that MapMarker module I linked to - it will take care of all of this for you!

I tried to use the Mapmarker module, but I dont know how to show the map on my website. Im really newbie with processwire but I tried like this:

1. Copy all of the files for this module into /site/modules/FieldtypeMapMarker/

2. In your admin, go to the Modules screen and "check for new modules." Click install for the Map Marker Fieldtype.

3. In your admin, go to Setup > Fields > Add New Field. Choose MapMarker as the type.If you are not sure what to name your field, simply "map" is a good one! Once created, configure the settings on the input tab.

4. Add your new "map" field to one or more templates, as you would any other field.

I made all of this, but then... where I have to put this part?

echo $page->map->address; // outputs the address you entered echo $page->map->lat; // outputs the latitude echo $page->map->lng; // outputs the longitude echo $page->map->zoom; // outputs the zoom level

Inside of a div?

Sorry for my mistakes :S

[adrian]

2 minutes ago, raulyjo said:

I made all of this, but then... where I have to put this part?

echo $page->map->address; // outputs the address you entered echo $page->map->lat; // outputs the latitude echo $page->map->lng; // outputs the longitude echo $page->map->zoom; // outputs the zoom level

Inside of a div?

That just goes into one of your template files, like: site/templates/home.php or basic-page.php, or perhaps contact.php if you are putting this map on a contact page that uses a template named "contact".

Do you have a PW site up and running with one of the initially installed site profiles? You should have at least a home.php template file - try there to start to get yourself going.

It sounds like it might be worth reading through some of the tutorials: http://processwire.com/docs/tutorials/

We're here to help, but you should do a little reading first to make life easier on yourself!

[raulyjo]

I have a init.php which is like my <head> and main.php as my footer, when I have my scripts src. I have also a template called contact.php, when is the map that I want to show and is like this: 

<script>
  app.controller('ContactoCtrl',function($scope, $http){
      $scope.page=<?php echo $page->toJSON() ?>;      
      $scope.enviarEmail = function(){
            $http.post( '/videsil/pwapi/', { do: 'getEmail', data:{
                'from': $scope.email,  
                'subject': $scope.subject, 
                'message': $scope.name + ' te ha enviado este mensaje: ' + $scope.message
            }})
             .success( function (result) {  
            console.log("email enviado", result); 

            $scope.name = null;
            $scope.email = null;
            $scope.subject = null;
            $scope.message = null;
        })
        .error(function(data){ console.log("NO enviado", data) });             
    }


});
</script>


<div ng-controller="ContactoCtrl">

<section id="contact">
        <div id="map" style="height:650px" data-latitude="39.4576737" data-longitude="-0.3628944,14" ></div>
       
    
        <div class="container-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-sm-offset-8">
                        <div class="contact-form">
                            <h3 class="letravidesil">Contacto</h3>

                            <address>
                              <strong>Videsil S.L.</strong><br>
                              C/ Nino Bravo, 5, 46812 <br>
                              Ayelo de Malferit, Valencia <br>
                              <abbr title="Phone"></abbr> (+34) 96 236 0123
                            </address>

                            <form id="main-contact-form" name="contact-form" method="post" action="#">
                                <div class="form-group">
                                    <input type="text" ng-model="name" name="name" class="form-control" placeholder="Nombre y teléfono" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" ng-model="email" name="email" class="form-control" placeholder="Email" required>
                                </div>
                                <div class="form-group">
                                    <input type="text" ng-model="subject" name="subject" class="form-control" placeholder="Asunto" required>
                                </div>
                                <div class="form-group">
                                    <textarea ng-model="message" class="form-control" rows="8" placeholder="Mensaje" required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary" name="submit" value="Enviar" ng-click="enviarEmail()">Enviar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!--/#bottom-->
    
</div>

 

[adrian]

Is that the entire contents of your contact.php file?

I would say you'd probably just want to add that echo statement (wrapped in PHP tags) somewhere above or below your address block.

You will also need to add the google maps script tag on the page - you could likely do it with your angular script code, but depending on how this template file is used are where the <head> and <body> tags are defined, it might be better to place it in that other file: _main.php perhaps? You could add some additional logic that checks the template of the page before adding it.

[Mamun Paul]

On 12/22/2016 at 11:26 PM, adrian said:

If you're using ryan's MapMarker module (http://modules.processwire.com/modules/fieldtype-map-marker/) you can add the API key in the module config settings. If not, this page explains how to add it when you manually add the script: https://developers.google.com/maps/documentation/javascript/get-api-key

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

I'm new to processwire, I'm using ryan's MapMarker module and I've added the api key as well  in module config but still maps are not visible. It is still giving 

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

and in console Google Maps JavaScript API error: RefererNotAllowedMapError.
Please help. Is there anything i'm doing wrong?

[adrian]

2 hours ago, Mamun Paul said:

Google Maps JavaScript API error: RefererNotAllowedMapError

https://docs.gravityview.co/article/626-google-maps-error-referernotallowedmaperror

Looks like you haven't set up your Google account to allow access from your site's domain.