如何將GoogleMap搜索框添加到我的自定義地圖？

我正在用google API和IGN API（法國地圖）開發我自己的地圖，我想添加一個Google Map Search Box，但是在仔細閱讀Google Map API後卻找不到成功的方法。如何將GoogleMap搜索框添加到我的自定義地圖？

這是我有： http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html

這是我想補充（不失去我的實際設置）什麼： https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr

我不明白怎麼混兩個HTML代碼。有人可以幫助我嗎？我的HTML + JavaScript的工作，我是初學者:)

謝謝

Tiphaine

相關的（非工作）代碼：

<!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>

來源

2014-01-28 user3087122

我得到這個錯誤your map：

Uncaught TypeError: Cannot read property 'SearchBox' of undefined

您需要加載API時。

變化：

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

您還沒有與ID = 「PAC-輸入」你的頁面上的元素。添加到您的HTML標記：

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

Working example

代碼片段（月亮瓷磚作爲正本不再可用）：

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>

來源

2014-01-28 17:45:59 geocodezip

太謝謝你了！我一直在尋找它！ – user3087122

此外，還應檢查API Manager中的「console.developers.google.com」下是否啓用了「Google Places API Web服務」。 –

如何將GoogleMap搜索框添加到我的自定義地圖？

回答

相關問題