Как вставить интерактивную карту?

Question

Я пытаюсь использовать GoogleMap в моем веб-сайте:

  function InsertMap() 
      { 
       var map; 
       var op = { 
        zoom: 10, 
        center: new google.maps.LatLng(-34.397, 150.644), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       };      
       map = new google.maps.Map(document.getElementById('id'), op); 
      } 

Я вызываю эту функцию на событие нажатия кнопки. Но моя проблема в том, что вместо интерактивной карты она вставляет статическую карту (одно изображение). Я также попробовал IsStaticMap : false, но его не работало, и когда я сделал это, он ничего не показывает ни статический, ни интерактивный. Выручи меня !

Answer 1

Существует реализация, использующая jQuery, которая может вам помочь. Исходный код и демо включены!

http://www.position-absolute.com/articles/create-an-interactive-google-map-widget-with-a-list-filter-and-a-map-helper-class/

Answer 2

Это то, что я обычно использую, работает хорошо! Вы можете отредактировать его в соответствии с вашими требованиями.

<iframe 
    width="425" 
    height="350" 
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=San%2BFrancisco%2C%2BCalifornia(HEY%21)@37.774930,-122.419416&ie=UTF8&z=12&t=m&iwloc=addr&output=embed"> 
    </iframe> 

<br> 

<table 
    width="425" 
    cellpadding="0" 
    cellspacing="0" 
    border="0"> 
    <tr> 
    <td align="left"> 
     <small><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=San%2BFrancisco%2C%2BCalifornia(HEY%21)@37.774930,-122.419416&ie=UTF8&z=12&t=m&iwloc=addr">View Larger Map</a></small></td><td align="right"><small><a href="http://www.github.com/dtx">my git!</a></small></td></tr> 
</table> 
</div> 

DEMO HERE