Marker dans google map avec carte perso

**duffman39** · 25/07/2014, 19h29

Bonjour

J'ai réaliser une carte à partir de photo comme cette exemple sur l'api de googlemap : https://developers.google.com/maps/d.../maptype-image

Le résultat obtenue est bien celui que je cherchais, sauf que je cherche désespérément la possibilité de mettre un marker.

En effet la class pour mettre la position d'un marker sur une carte est bien google.maps.LatLngor cette notion de latitude et longitude n'existe pas sur ma carte vue qu'il n'y a pas de liens avec ces coordonnées terrestre sur ma carte.

Pouvez vous m'aider ou m'orienté pour pouvoir mettre un marker avec des coordonnées X Y sur ma carte et non lat long ?

Merci par avance

Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- Bootstrap core CSS -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet" media="screen">
 
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
    <![endif]-->
    <style>
      html { height: 100% }
      body { height: 100%; background-color:#CCC }
      #map-outer {height: 440px; padding: 20px; border: 2px solid #CCC; margin-bottom: 20px; background-color:#FFF }
      #map { height: 400px }
      @media all and (max-width: 768px) {
        #map-outer  { height: 650px }
        }
    </style>
  </head>
  <body>
  <div class="container">
  <div class="row">
      <div id="map-outer" class="col-md-12">
          <div id="address" class="col-md-4">
            <h2>Etage 1</h2>
          </div>
 
        <div id="map" class="col-md-8"><span class="loading">Chargement...</span></div>
         <div id="message" class="texte" align="center"></div>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
 
 
 
 
 
                var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false
 
 
 
            /*
             * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
             * ----------------
             */
 
                function getNormalizedCoord(coord, zoom) {
                    if (!repeatOnXAxis) return coord;
 
                    var y = coord.y;
                    var x = coord.x;
 
                    // tile range in one direction range is dependent on zoom level
                    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                    var tileRange = 1 << zoom;
 
                    // don't repeat across Y-axis (vertically)
                    if (y < 0 || y >= tileRange) {
                        return null;
                    }
 
                    // repeat across X-axis
                    if (x < 0 || x >= tileRange) {
                        x = (x % tileRange + tileRange) % tileRange;
                    }
 
                    return {
                        x: x,
                        y: y
                    };
 
                }
 
 
            /*
             * Main Core
             * ----------------
             */
 
                window.onload = function() {
 
                    // Define our custom map type
                    var customMapType = new google.maps.ImageMapType({
                        getTileUrl: function(coord, zoom) {
                            var normalizedCoord = getNormalizedCoord(coord, zoom);
                            if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
                                return zoom + '/' + normalizedCoord.x + '/' + normalizedCoord.y + '.png';
                            } else {
                                return 'empty.png';
                            }
                        },
                        tileSize: new google.maps.Size(256, 256),
                        maxZoom: 3,
                    });
 
                    // Basic options for our map
                    var myOptions = {
                        center: new google.maps.LatLng(0, 0),
                        zoom: 1,
                        minZoom: 0,
                        streetViewControl: false,
                        mapTypeControl: false,
                        mapTypeControlOptions: {
                            mapTypeIds: ["custom"]
                        }
                    };
 
                    // Init the map and hook our custom map type to it
                    var map = new google.maps.Map(document.getElementById('map'), myOptions);
                    map.mapTypes.set('custom', customMapType);
                    map.setMapTypeId('custom');
 
                }
 
 
 
        </script>
      </div><!-- /map-outer -->
  </div> <!-- /row -->
 
</div><!-- /container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
 
  </body>
</html>

**NoSmoking** · 26/07/2014, 22h37

Bonjour,
tu peux toujours mettre un marker, la latitude/longitude existe même si elle n'a pas forcément de rapport avec ce que tu affiches.

Tu peux quand même aller faire un tour du coté de la méthode fromLatLngToPoint pour la conversion.

Marker dans google map avec carte perso

APIs Google

Discussions similaires

Partager

Partager