Créer sa propre lib

google maps et autres questions

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous,

Je souhaiterais créer ma propre librairy google maps. J'ai réussi à afficher des marquers etc en mettant tout dans le fichier principal mais lorsque j'essaye de faire un Objet Gmap, je n'y arrive pas.. Voici ce que j'ai fait code JS (fichier map.js) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
"use strict";

var Gmap = function(options){

    this._config = jQuery.extend({
        'optionsMap': {
            'mapTypeId': google.maps.MapTypeId.ROADMAP,
            'zoom': 15
        },
        'block': {
            'name': 'map_canvas'
        },
        'address': 'France',
        'markers': ''
    }, (options || {}));

};

Gmap.prototype = {

    // init map
    init: function () {

        var myLatLng = {lat: 37.769, lng: -122.446};
        var myOptions = {
            center: myLatLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        console.log('config:', this._config);
        console.log('block name :', this._config.block.name);
        console.log('myOptions:', myOptions);

        // Init map
        var map = new google.maps.Map(this._config.block.name, myOptions);
    }
}

Le fichier HTML :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
    ...
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="map.js"></script>
</head>
<body>
    <form method="POST" id="geoloc" >
        <!-- action pour l'autocomplete -->
        <input id="autocomplete" type="text" placeholder="Type in an address" />
        <!--// action on Submit-->
        <input type="submit" value="Submit">
    </form>
    <div id="map_canvas"></div>
    <script type="text/javascript">
        (function(){
            // 1°) Afficher mes console.log de mon fihcier js mais n'affiche pas la map
            var map = new Gmap();
            map.init();

            // 2°) N'affiche strictement rien
            Gmap.init();

            // 3°)  Example google basic fonctionnel mais je souhaite réutiliser mon code plus tard
            // Want to create my own librairies (needed later)
            var haightAshbury = {lat: 37.769, lng: -122.446};
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 12,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            });
        })();
    </script>
</body>

Comme vous pouvez le voir j'ai mis dans mon fichier HTML à la ligne 18 et 22 des commentaires sur les choses qui me bloquent. Mais ne comprenant absolument pas ce comportement, je viens vous demander de l'aide.

Merci d'avance.

EDIT : J'ai trouvé, c'est juste qu'il fallait lors de mon init map mettre :

1
       var map = new google.maps.Map(document.getElementById(this._config.block.name), myOptions);

Édité par zaewyr

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte