Получить ключ API Карт Google для вашего сайта
Лучший способ добавить карту Google на ваш сайт - использовать API Карт Google. И Google рекомендует вам получить ключ API для использования карт.
Вам не требуется использовать ключ API для использования API Карт Google v3, но он очень полезен, так как он позволяет вам следить за вашим использованием и оплачивать дополнительный доступ. Google Maps API v3 имеет квоту в 1 запрос в секунду для каждого пользователя максимум 25 000 запросов в день. Если ваши страницы превышают эти ограничения, вам нужно будет активировать выставление счетов, чтобы получить больше.
Как получить ключ API Карт Google
- Войдите в Google, используя свой аккаунт Google.
- Перейдите в Консоль разработчиков
- Прокрутите список и найдите Google Maps API v3, затем нажмите кнопку «ВЫКЛ», чтобы включить его.
- Прочтите и согласитесь с условиями.
- Перейдите в консоль API и выберите «API Access» в меню слева
- В разделе «Простой доступ к API» нажмите кнопку «Создать новый ключ сервера …».
- Введите IP-адрес вашего веб-сервера. Это IP-адрес, откуда будут поступать ваши запросы на Карты. Если вы не знаете свой IP-адрес, вы можете посмотреть его.
- Скопируйте текст в строке «API-ключ:» (не включая этот заголовок). Это ваш ключ API для ваших карт.
Преобразование вашего адреса в координаты
Чтобы использовать Карты Google на своих веб-страницах, вам необходимо иметь широту и долготу для местоположения. Вы можете получить их с помощью GPS или вы можете использовать онлайн-инструмент, такой как Geocoder.us, чтобы рассказать вам.
- Перейдите в Geocoder.us и введите свой адрес в поле поиска.
- Скопируйте первое число для широты (без буквы спереди) и вставьте его в текстовый файл. Вам не нужен индикатор степени (º).
- Скопируйте первое число для долготы (снова без буквы спереди) и вставьте его в текстовый файл.
Ваша широта и долгота будет выглядеть примерно так:
40.756076-73.990838
Geocoder.us работает только для адресов США, если вам нужно получить координаты в другой стране, вам следует искать аналогичный инструмент в вашем регионе.
03 из 05Добавление карты в вашу веб-страницу
Во-первых, добавьте скрипт карты в
вашего документа
Откройте свою веб-страницу и добавьте следующее в ГОЛОВА вашего документа.
Измените выделенную часть на числа широты и долготы, которые вы записали на втором шаге.
Во-вторых, добавьте элемент карты на страницу
После того, как все элементы скрипта добавлены в ГОЛОВА вашего документа, вам нужно разместить свою карту на странице. Вы делаете это, добавляя DIV элемент с ID = "карта-холст" приписывать. Я рекомендую вам также стилизовать этот div с шириной и высотой, которая будет соответствовать вашей странице:
Наконец, загрузка и тестирование
Последнее, что нужно сделать, это загрузить свою страницу и проверить, отображает ли ваша карта. Ниже приведен пример карты Google на странице. Обратите внимание, что из-за того, как работает CMS About.com, вам нужно щелкнуть ссылку, чтобы отобразить карту. Это не относится к вашей странице.
Если ваша карта не отображается, попробуйте инициализировать ее с помощью ТЕЛО атрибут:
OnLoad = "инициализации ()" >
Другие вещи, чтобы проверить, не связана ли ваша карта, включают:
- Ищите опечатки в вашем JavaScript, включая случай. JavaScript чувствителен к регистру.
- Убедитесь, что у вас есть
зума такжецентрнабор опций. - Убедитесь, что ваш
DIVэлемент находится на странице с правильным идентификатором. - Убедитесь, что ваш
DIVэлемент имеет высоту.
Добавить маркер на вашу карту
Но какая польза от карты вашего местоположения, если нет указателя, указывающего людям, куда они должны идти?
Чтобы добавить стандартный красный маркер Google Maps, добавьте в свой скрипт ниже var map = … линия:
var myLatlng = new google.maps.LatLng ( широта Долгота );var marker = новый google.maps.Marker ({позиция: myLatlng,карта: карта,заглавие:" Бывший штаб-квартира '});
Измените выделенный текст на широту и долготу и заголовок, который вы хотите отображать, когда люди навешивают маркер.
Вы можете добавить столько же маркеров на страницу, сколько хотите, просто добавьте новые переменные с новыми координатами и названиями, но если карта слишком мала, чтобы отображать все маркеры, они не будут отображаться, если считыватель не будет масштабироваться.
var latlng 2 = новый google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = новый google.maps.Marker ({позиция: latlng 2 ,карта: карта,заглавие:" Компьютер Apple '});
Вот пример карты Google с маркером. Обратите внимание, что из-за того, как работает CMS About.com, вам нужно щелкнуть ссылку, чтобы отобразить карту. Это не относится к вашей странице.
05 из 05Добавить вторую (или более) карту на страницу
Если вы посмотрите на мою страницу Google maps, вы заметите, что на странице отображается несколько карт. Это очень легко сделать. Вот как.
- Получите широту и долготу всех карт, которые вы хотите отобразить, как мы узнали на шаге 2 этого урока.
- Вставьте первую карту, как мы узнали на шаге 3 этого урока. Если вы хотите, чтобы карта имела маркер, добавьте маркер, как на шаге 4.
- Для второй карты вам нужно добавить 3 новых строки в ваш скрипт initialize ():
var latlng2 = новый google.maps.LatLng ( вторых координатах );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Если вам нужен маркер на новой карте, добавьте второй маркер, указывающий на вторую координату и вторую карту:
var myMarker2 = новый google.maps.Marker ({position: latlng2 , карта: map2 , заглавие:" Ваше название маркера ' }); - Затем добавьте вторую, где вы хотите вторую карту. И не забудьте дать ему
ID = "map_canvas_2"Я БЫ. - Когда ваша страница загружается, отображаются две карты
Вот код страницы с двумя картами Google:
