[Résolu] Créer sa propre lib • Forum • Zeste de Savoir

zaewyr, mardi 24 mai 2016 à 10h47
Modifié

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

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

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

24/05/16 à 10h47
Modifié

+0 -0

Créer sa propre lib

google maps et autres questions

Pas encore membre ?