Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a GoogleMap Search Box to my customized map?

I'm developing my own map with google API and IGN API (french map) and I'd like to add a Google Map Search Box but can't find a way to succeed even after reading carefully the Google Map API.

This is what I have: http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html

This is what I want to add (without losing my actual settings): https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr

I don't understand how to mix the two html codes. Someone could help me? I work in html+javascript.

The relevant (non-working) code:

<!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> 
like image 576
NiphitAe Avatar asked Jan 28 '14 17:01

NiphitAe


People also ask

Can you add a text box to Google Maps?

The built in feature of GoogleMapControl asp.net gives you the abillity to place and write custom text anywhere on your Google Map . This feature is very useful when deling with many markers.


1 Answers

I get this error on your map:

Uncaught TypeError: Cannot read property 'SearchBox' of undefined  

You need to include the places library when you load the API.

Change:

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

To:

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

You also don't have an element with id="pac-input" on your page. Add this to your HTML markup:

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

Working example

code snippet (with moon tiles as the originals are no longer available):

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>    <div id="map_canvas"></div>  <input id="pac-input" />
like image 142
geocodezip Avatar answered Sep 19 '22 13:09

geocodezip