Menu
I'm creating a static html page to display a number of locations from a data. I've just copied one of the samples and are working backwards but I'm getting the following error in the Safari Inspector:
main.js:1SyntaxError: Parse error
sample.htm:10TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor.
Here's 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 actually works in IE v8 on Windows but not in Safari and I need to get it working for both.
924
Add callback function to your google maps request. It'll be executed after Google loads everything it needs.
http://maps.google.com/maps/api/js?sensor=false&callback=initialize
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>`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With