Jump to content
raulyjo

Problems with Google Maps

Recommended Posts

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 

 

Share this post


Link to post
Share on other sites

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>
  • Like 2

Share this post


Link to post
Share on other sites
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

  • Like 1

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Federico
      Hello PW Community,
      Do you know how to export current page's map as a pdf?
      Extended explanation: I have a template which has lots of fields, among which there is a field "geolocation" populated by the googlemapmarker module. Now, I wish to export the whole template as a pdf (with pages2pdf module), but the normal code that works on the ordinary pw's templates does not seems to work within the Pages2pdf dedicated templates.
      Below the code (working but not producing anything within Pages2pdf module):
      // alternative 01 <?php $map = $modules->get('MarkupGoogleMap'); echo $map->render($page, 'geolocation'); ?> // alternative 02 <?php $page = wire('page'); $map = $modules->get('MarkupGoogleMap'); echo $map->render($page, 'geolocation'); ?> Thanks in advance!
    • By caribou
      WWF sponsors a number of projects to track wildlife with satellite tags - this Processwire/Google Maps tool lets the public follow along in nearly real time. There are 6 different species and over 40 individual animals.
      http://wwfgap.org/tracker/
      This is the second iteration using Processwire - it was a delight to work with. Feedback welcome!
    • By Mats
      I'm trying to use https://github.com/galen/PHPGoogleMaps to render Google maps from PW templates, but i can't get  it to work. 
      Any ideas on how to get this working from templates? Or is bootstrapping the way to go? 
      /Mats
×
×
  • Create New...