Масштаб Google Карт не работает

Я пытаюсь использовать Google Maps, используя html и jQuery, но функция масштабирования не работает, я пытаюсь использовать эти Google Maps с собственными данными, проверьте мой код ниже.

			<script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDXNCKw3k07Z0QLw2GOuPjajvS0psHVCX0&libraries=places,drawing,geometry"></script>
<script type = "text/javascript">
				////////////////////////////////////////////////////////////////////////
				// Google Maps JavaScript API:
				// https://developers.google.com/maps/documentation/javascript/?hl=de
				// Marker Icons:
				// https://sites.google.com/site/gmapsdevelopment/
				////////////////////////////////////////////////////////////////////////

				////////////////////////////////////////////////////////////////////////
				// JQuery
				////////////////////////////////////////////////////////////////////////

			var map = null;
				//make an empty bounds variable
				var bounds = new google.maps.LatLngBounds();

				// LatLng's we want to show
			$( document ).ready($(function() {
				var mapOptions = {  
									zoom      : 13,
						}
			   
					map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
					// ******************************************************************************
					$.ajax({
					  url     : "../rest/items/locationIrvan/state/",
					  data    : {},
					  success : function( data ) {
						  if ( map == null) { return; }
						  if ( data == "Uninitialized") { return; }
						  
						  var coords = data.split(',');
						  var latlngPatrik = new google.maps.LatLng(coords[0],coords[1]);
						  
						  var marker = new google.maps.Marker({
							position  : latlngPatrik,
							map       : map,
							icon      : 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png',
							title     : "Irvan"
						  }) // end of [Marker]
							   bounds.extend(latlngPatrik);
						} // end of [function]
					}) // end of [$.ajax]
		}))

				$( document ).ready($(function() {
			 // ******************************************************************************
			// ******************************************************************************
					$.ajax({
					  url     : "../rest/items/locationIrvan/state/",
					  data    : {},
					  success : function( data ) {
						  if ( map == null) { return; }
						  if ( data == "Uninitialized") { return; }

						  var coords = data.split(',');
						  var latlngKarin = new google.maps.LatLng(coords[0],coords[1]);

						  var marker = new google.maps.Marker({
							position  : latlngKarin,
							map       : map,
							icon      : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
							title     : "Irvan"
						  }) // end of [Marker]

						  $.ajax({
							url     : "../rest/items/mqttIrvanAccuracy/state/",
							data    : {},
							success : function( data ) {
							if ( data == "Uninitialized") { return; }
							  var accuracy = parseInt(data);
							  var circle = new google.maps.Circle({
								center        : latlngKarin,
								radius        : accuracy,
								map           : map,
								strokeColor   : '#00FF00',
								strokeOpacity : 0.8,
								strokeWeight  : 2,
								fillColor     : '#00FF00',
								fillOpacity   : 0.35,
							  }); // end of [Circle]

							  bounds.extend(latlngKarin);
							  map.fitBounds(bounds);
							} // end of [function]
						  }) // end of [$.ajax]
						} // end of [function]
					}) // end of [$.ajax]
				   // map.fitBounds(bounds);
			}))
			</script>
.Flexible-container {
			  position: relative;
			  padding-bottom: 0px;
			  padding-top   : 0px;
			  height        : 340px ;
			  overflow: hidden;
			}

			.Flexible-container iframe,
			.Flexible-container object,
			.Flexible-container embed {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "map_canvas" class = "Flexible-container" />

Независимо от того, что я изменяю значение масштабирования, результат остается тем же, надеюсь, кто-нибудь может дать мне подсказку, я работаю над этим в течение нескольких недель, но ничего, спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 725
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

использовать это

    var mapOptions = {  
                                zoom      : 13,
                                zoomControl: true
                        }
Ответ принят как подходящий

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

прокомментируйте строку "map.fitBounds (bounds);" и изменить масштаб

ALAN ALBY 09.04.2018 10:28
Uncaught TypeError: Cannot read property 'zoom' of null at Object.jb (map.js:14) at HTMLDivElement.C._.Yn.Oa (common.js:76) jb @ map.js:14 C._.Yn.Oa @ common.js:76
Irvan Sandoval 09.04.2018 10:42

Другие вопросы по теме