Как отображать бизнес-информацию с помощью API Карт Google?

Question

Раньше я бы пошел в Google, схватил iframe из описания организации и просто вложил ее в страницу, над которой я работал. Информационное окно покажет информацию о бизнесе, таких как полный адрес, номер телефона и веб-сайт и т.д. (см рисунок ниже):

После принятия решения, чтобы повторить свой веб-сайт с нуля, я решил, что я бы попытаться обновите карту. Для этого было несколько причин. Новые Google Maps выглядят более отполированными (личные предпочтения), и с помощью API я мог бы стилизовать карту, чтобы она соответствовала цветовой схеме моего сайта.

Я начал с довольно простой немного JavaScript:

function initialize(data) { 

    var map; 
    var someLoc = new google.maps.LatLng(####,#####); 

    var MY_MAPTYPE_ID = 'custom_style'; 

    var featureOpts = [ 
    { 
     "stylers": [ 
     { "hue": "#8800ff" }, 
     { "lightness": 33 } 
     ] 
    } 
    ] 

    var mapOptions = { 
     zoom: 12, 
     center: someLoc, 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
     }, 
     mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    var styledMapOptions = { 
    name: 'Custom Style' 
    }; 

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 


} 


$(document).ready(function(){ 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

Это дает мне следующую карту:

Однако, я хотел бы, чтобы отобразить маркер для размещения бизнеса и соответствующую информацию, поэтому я добавляю:

Но это означает, что я получаю отображаемую на карте и маркер я только что созданной организации:

Можно ли получить тот же результат, что и Iframe (первое изображение) с помощью API Карт Google (V3)? По сути, я хотел бы получить, чтобы показать соответствующую информацию бизнеса при загрузке страницы, так что я что-то похожее на:

Answer 1

Ладно, я нашел довольно простое решение.

Установите уровень MaxZoom таким образом, только штифт создания можно увидеть:

var mapOptions = { 
     zoom: 12, 
     maxZoom: 16, 
     center: myLoc, 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
     }, 
     mapTypeId: MY_MAPTYPE_ID 
    }; 

Затем добавьте любую другую информацию, используя information window.