Comment ajouter une boîte de recherche GoogleMap à ma carte personnalisée?

Je développe ma propre carte avec Google API et IGN API (carte française) et j'aimerais ajouter une boîte de recherche Google Map, mais je ne peux pas trouver un moyen de réussir, même après avoir lu attentivement l'API Google Map.

C'est ce que j'ai: http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html

C'est ce que je veux ajouter (sans perdre mes paramètres réels): https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr

Je ne comprends pas comment mélanger les deux codes html. Quelqu'un pourrait m'aider? Je travaille dans html + javascript, et je suis un débutant 🙂

Je vous remercie

Tiphaine

Le code pertinent (non fonctionnel):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>La Tarte Aux Crésors "Beta"</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> "use strict"; var ignKey = "ljozkgwvms60dtumhx67z6u3" function makeIGNMapType(layer, name, maxZoom) { return new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://gpp3-wxs.ign.fr/" + ignKey + "/geoportail/wmts?LAYER=" + layer + "&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0" + "&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX=" + zoom + "&TILEROW=" + coord.y + "&TILECOL=" + coord.x; }, tileSize: new google.maps.Size(256,256), name: name, maxZoom: maxZoom }); } function initialize() { var map_canvas = document.getElementById("map_canvas"); var map = new google.maps.Map(map_canvas, { mapTypeId: 'IGN', scaleControl: true, streetViewControl: true, panControl: true, mapTypeControl:true, overviewMapControl: true, overviewMapControlOptions: { opened: true, position: google.maps.ControlPosition.BOTTOM_CENTER }, mapTypeControlOptions: { mapTypeIds: [ 'IGN', 'IGNScanExpress', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP], style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR }, center: new google.maps.LatLng(47, 3), zoom: 6, draggableCursor: "crosshair" }); map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18)); map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16)); // Create the search box and link it to the UI element. var input = /** @type {HTMLInputElement} */( document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var searchBox = new google.maps.places.SearchBox( /** @type {HTMLInputElement} */(input)); // Listen for the event fired when the user selects an item from the // pick list. Retrieve the matching places for that item. google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); for (var i = 0, marker; marker = markers[i]; i++) { marker.setMap(null); } // For each place, get the icon, place name, and location. markers = []; var bounds = new google.maps.LatLngBounds(); for (var i = 0, place; place = places[i]; i++) { var image = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. var marker = new google.maps.Marker({ map: map, icon: image, title: place.name, position: place.geometry.location }); markers.push(marker); bounds.extend(place.geometry.location); } map.fitBounds(bounds); }); // Bias the SearchBox results towards places that are within the bounds of the // current map's viewport. google.maps.event.addListener(map, 'bounds_changed', function() { var bounds = map.getBounds(); searchBox.setBounds(bounds); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <style> html, body, #map_canvas { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; left: 0; top: 0; z-index: 0; } </style> </head> <body> <div id="map_canvas"></div> </body> </html> 

Je reçois cette erreur sur votre carte :

 Uncaught TypeError: Cannot read property 'SearchBox' of undefined 

Vous devez inclure la bibliothèque des lieux lorsque vous chargez l'API.

Changement:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

À:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script> 

Vous n'avez pas non plus d'élément avec id = "pac-input" sur votre page. Ajoutez ceci à votre balisage HTML:

 <input id="pac-input"></input> 

Exemple de travail

Extrait de code (avec des tuiles de lune car les originaux ne sont plus disponibles):

 var ignKey = "ljozkgwvms60dtumhx67z6u3" var markers = []; function makeIGNMapType(layer, name, maxZoom) { return new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var normalizedCoord = getNormalizedCoord(coord, zoom); if (!normalizedCoord) { return null; } var bound = Math.pow(2, zoom); return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' + '/' + zoom + '/' + normalizedCoord.x + '/' + (bound - normalizedCoord.y - 1) + '.jpg'; }, name: 'Moon', tileSize: new google.maps.Size(256, 256), maxZoom: 9, minZoom: 0 }); } function initialize() { var map_canvas = document.getElementById("map_canvas"); var map = new google.maps.Map(map_canvas, { mapTypeId: 'IGN', scaleControl: true, streetViewControl: true, panControl: true, mapTypeControl: true, overviewMapControl: true, overviewMapControlOptions: { opened: true, position: google.maps.ControlPosition.BOTTOM_CENTER }, mapTypeControlOptions: { mapTypeIds: [ 'IGN', 'IGNScanExpress', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP ], style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR }, center: new google.maps.LatLng(47, 3), zoom: 6, draggableCursor: "crosshair" }); map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18)); map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16)); // Create the search box and link it to the UI element. var input = /** @type {HTMLInputElement} */ ( document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var searchBox = new google.maps.places.SearchBox( /** @type {HTMLInputElement} */ (input)); // Listen for the event fired when the user selects an item from the // pick list. Retrieve the matching places for that item. google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); for (var i = 0, marker; marker = markers[i]; i++) { marker.setMap(null); } // For each place, get the icon, place name, and location. markers = []; var bounds = new google.maps.LatLngBounds(); var place = null; var viewport = null; for (var i = 0; place = places[i]; i++) { var image = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. var marker = new google.maps.Marker({ map: map, icon: image, title: place.name, position: place.geometry.location }); viewport = place.geometry.viewport; markers.push(marker); bounds.extend(place.geometry.location); } map.setCenter(bounds.getCenter()); }); // Bias the SearchBox results towards places that are within the bounds of the // current map's viewport. google.maps.event.addListener(map, 'bounds_changed', function() { var bounds = map.getBounds(); searchBox.setBounds(bounds); }); } // Normalizes the coords that tiles repeat across the x axis (horizontally) // like the standard Google map tiles. function getNormalizedCoord(coord, zoom) { 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 }; } google.maps.event.addDomListener(window, 'load', initialize); 
 html, body, #map_canvas { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; left: 0; top: 0; z-index: 0; } 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script> <div id="map_canvas"></div> <input id="pac-input"></input>