All geek questions in one place

Google Maps API v3 - TypeError: the result of the expression 'google.maps.LatLng' [undefined] is not a constructor

I am creating a static html page to display multiple locations from data. I just copied one of the samples and it works in the opposite direction, but I get the following error in Safari Inspector:

main.js:1SyntaxError: Parse error sample.htm:10TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor.

Here is my html code:

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Multi Markers Sample via Google Maps</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-30.2965590,153.1152650); var myLatlng1 = new google.maps.LatLng(-30.2956470,153.1123707); var myLatlng2 = new google.maps.LatLng(-30.2864430,153.1360230); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png', title:"Original Location" }); var marker = new google.maps.Marker({ position: myLatlng1, map: map, title:"Tom Cruise" }); var marker = new google.maps.Marker({ position: myLatlng2, map: map, title:"Lady Gaga" }); } </script> </head> <body onLoad="initialize()"> <div id="map_canvas"></div> </body> </html>

I'm not sure what I'm doing wrong here - it really works in IE v8 on Windows, but not on Safari, and I need to get it to work for both.

+6
source share
2 answers

Add a callback function to your Google Maps request. It will be executed after Google downloads everything that it needs.

 http://maps.google.com/maps/api/js?sensor=false&callback=initialize
+22
source

hi, please use this code using jQuery `

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Multi Markers Sample via Google Maps</title> <script src="js/jquery-1.10.2.min.js"></script> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> #map_canvas { height: 500px; width: 100%; } </style> <script type="text/javascript"> $(document).ready(function () { var myLatlng = new google.maps.LatLng(-30.2965590, 153.1152650); var myLatlng1 = new google.maps.LatLng(-30.2956470, 153.1123707); var myLatlng2 = new google.maps.LatLng(-30.2864430, 153.1360230); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png', title: "Original Location" }); var marker = new google.maps.Marker({ position: myLatlng1, map: map, title: "Tom Cruise" }); var marker = new google.maps.Marker({ position: myLatlng2, map: map, title: "Lady Gaga" }); }); </script> </head> <body > <div id="map_canvas"></div> </body> </html>`
+1
source

Source: https://habr.com/ru/post/891994/

More articles:


All Articles