Кликните для просмотра google map

Question

У меня есть одна страница для показа работы и местоположения. я хочу, когда загрузка страницы сначала покажет работу pic и при нажатии на карту вместо pic.

это может кодировать

<script> 

var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
    zoom: 15, 
    center: latlng 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'onclick', initialize); 
</script> 

<div id="panel"> 
    <input id="address" type="textbox" value="england london"> 
    <input type="button" value="Geocode" onclick="codeAddress();"> 
</div> 
<div id="map-canvas"> <img src="img/src.jpg" /></div> 

, но при загрузке страницы первой карты нагрузки и рис не показывают.

Как я могу использовать «кнопку» для перехода между изображением и картой и первым загружать изображение?

Answer 1

Вы инициализациейgeocoder переменная в метод initialize(). Итак, вы вызываете этот метод перед описанным ниже методом geocoder.geocode(...) как

function codeAddress() { 
    initialize(); //intialize geocoder 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    .... 
    .... 

FYI: Также map-canvas элемент должен height и width. Так набор стилей, таких как

#map-canvas { 
    height: 100px; 
    width: 100px: 
} 

проверить в JSFiddle

Примечание:

или либо вызвать initialize() на странице загрузки для лучшей производительности еще каждый раз, когда карты Google будет инициализирован.

google.maps.event.addDomListener(window, 'load', initialize);