i have been able to deploy google map on localhost, it loads all coordinates with success.
But when i upload the same code to my server, it completely fails to load.I tried all i could, am really at a lost here.
<html>
<head>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
<style>
BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }
#map_canvas { width:100%; height: 100%; z-index: 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" /></script>
<script type='text/javascript'>
jQuery(document).ready( function($){
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
//Get data, and replace it on the form
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function deleteMarkers() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
setInterval(function(){
$.get('ajax_gp_gps.php', function(data){
var bounds = new google.maps.LatLngBounds();
var encodedString;
var stringArray = [];
encodedString = data;
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
//alert(image + " " + addressDetails[1] );
marker = new google.maps.Marker({
map: map,
position: lat,
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
// where I have added .html to the marker object.
//infowindow.setContent( marker.html);
info.open(map,this);
infos[0]=info;
});
bounds.extend(lat);
}
map.fitBounds(bounds);
});
},1000);
});
</script>
</head>
<body>
<?php include_once("ajax_gp_gps.php"); ?>
<div id='input'>
<input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>">
</div>
<div id="map_canvas"></div>
</body>
</html>
You need to check google API if your online domain has access to call it or not.
I had the same issue, and it was simple fix: If you page uses https, make sure google maps url within the script tag also uses https:
Related
I'm extremely new to both JS and jQuery, and I've got this code:
<html>
<style>
/**
* Default attributes for gadget body.
*/
body {
font-family: Arial;
background: none transparent;
padding: 0px;
}
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<body>
<div id="map_canvas"></div>
<script>
var APIKey = "MyKeyValueIsInHere";
var geocoder;
var map;
var marker;
var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';
var lat = 55.653363;
var lng = 12.547604;
function initialize() {
var latlng = new google.maps.LatLng(lat,lng);
// set the options for zoom level and map type
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// create a map in the map_canvas div element
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setCenter(latlng);
var marker = new google.maps.Marker({
map: map,
position: latlng
});
alert(locationTest);
var text = JSON.parse(locationTest);
var infoWindow = new google.maps.InfoWindow();
var houseNumber = text.address.house_number;
var road = text.address.road;
var suburb = text.address.suburb;
var zipCode = text.address.postcode;
var city = text.address.city;
var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(address);
infoWindow.open(map, this);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=" + APIKey + "&sensor=false&callback=initialize";
document.body.appendChild(script);
}
loadScript();
</script>
</body>
</html>
And i need to incorporate the following code :
$('#c').load('http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1', function (response) {
console.log('response is', response);
var b = $('#c').html();
console.log('b is', b);
var a = JSON.parse(b);
console.log('a is ', a);
$('#d').html(a.address.neighbourhood);
});
Basically, this code is supposed to show a location on google maps, the location is set by long and latitude. On the marker, I want an info box to pop up with the address. The jQuery code i've found, seems to work here, but I have fallen short now that I have to include it into my JS. I hope someone can help me, I can't figure out how to implement it.
You need to add jquery script link to your tag.
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
This code it's not displayed in Google Chrome. Why?
It worked in Firefox.
The code: I'm trying to load from a xml file a set of coordinates+description to
render a map and plot them on it.
And there's a mouse handle to return on screen the coordinates on a mouse click.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="maps.css">
<div id="map_canvas"></div>
<!-- Loading jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Loading Google Map API engine v3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false">
</script>
<script type="text/javascript">
var map;
var global_markers = [];
var marker = null;
var markers = [];
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "imoveis.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("imovel");
for (i = 0; i < x.length; i++) {
var lat = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue
var lng = x[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue
var desc = x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue
var aux = [lat, lng, desc];
markers.push(aux);
}
var infowindow = new google.maps.InfoWindow({});
function initialize() {
//geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-21.2450, -45),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker();
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
$("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng());
$("#coordinate").select();
//delete the old marker
if (marker) {
marker.setMap(null);
}
//creer à la nouvelle emplacement
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
}
function addMarker() {
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i][0]);
var lng = parseFloat(markers[i][1]);
var trailhead_name = markers[i][2];
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
});
marker['infowindow'] = contentString;
global_markers[i] = marker;
google.maps.event.addListener(global_markers[i], 'click', function() {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="text" id="coordinate" value="Latitude, Longitude" />
<div id="map"></div>
</body>
</html>
You are loading the Google Maps API twice:
<!-- Loading Google Map API engine v3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false">
</script>
You should see the following in the Chrome DevTools console:
Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Change your HTML for the API to just one script tag:
<!-- Loading Google Map API engine v3 -->
<script src="http://maps.googleapis.com/maps/api/js?v=3&key=MYID&sensor=false"></script>
Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!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>KML Layer</title>
<link href="/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" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>
If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example
hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);
I am a newbie in Google Maps API.
I have a XML file that contains the following:
<?xml version="1.0"?>
-<Customers>-
<Marker category="Production">
<title lang="en">Invensys</title>
<site_location>Neponset Avenue 22, Foxborough, Foxboro, MA, United States</site_location>
<cordinantes>42.066817,-71.24814</cordinantes>
<site_status>Normal</site_status>
</Marker>
<Marker category="Production"><title lang="en">Yokogawa Japan</title>
<site_location>Shinjuku, Tokyo,Japan</site_location>
<cordinantes>36.543915,136.629281</cordinantes>
<site_status>Critical</site_status>
</Marker>
</Customers>
And this is the JS file containing the function that reads the XML file and enters the data into an array, file is called func.js.
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
var markers = [];
$.get('Customers.xml', function(xml) {
var jsonObj = $.xml2json(xml);
$.each(jsonObj.Marker, function(){
var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
var latlng = new google.maps.LatLng (this.cordinantes);
var mark = {
title: this.title,
location: this.site_location,
cord: latlng,
icon: stat
}
markers.push(mark);
});
debugger;
});
And this HTML file that contains the map & should generate two markers according to the content of the "markers" array.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript' src='func.js'></script>
<script>
markers;
var map;
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(32.637929,-16.934395),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I need assistance in using the data inside the "markers" array in order to generate markets.
How can I use the markers array in order to do that ?
Thanks in advance.
In the Initialize function do this (if your sure the markers have been loaded at this point):
for(var i=0; i< markers.length; i++){
var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}
If the markers have not been loaded create a function like this:
function AddMarkers(){
for(var i=0; i< markers.length; i++){
var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}
}
And call this function in the callback of your $.get like this:
$.get('Customers.xml', function(xml) {
var jsonObj = $.xml2json(xml);
$.each(jsonObj.Marker, function(){
var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
var latlng = new google.maps.LatLng (this.cordinantes);
var mark = {
title: this.title,
location: this.site_location,
cord: latlng,
icon: stat
}
markers.push(mark);
});
AddMarkers();
debugger;
});
That will add your markers, for information on how to generate a custom icon refers to
GoogleMaps API Reference
GoogleMaps Icon
You can complete the function AddMarkers to generate the icons and so on
XML File: Cities.xml
<Cities>
<CityName>
<id>1</id>
<name>A</name>
<latitude>40.978989</latitude>
<longitude>-81.488095</longitude>
</CityName>
<CityName>
<id>2</id>
<name>B</name>
<latitude>35.05956</latitude>
<longitude>-106.80981</longitude>
</CityName>
</Cities>
HTML:
<div id="map_canvas" style="width:460px;margin-left: 0px; padding: 0px; height:350px; text-align:center;"></div>
Add below script in head section.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Javascript:
window.onload = function () {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "Cities.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("CityName");
var mapOptions = {
center: new google.maps.LatLng(39.8634242, -97.28818149999998),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < x.length; i++) {
var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
var data = '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">'+ x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</span>' + '</div>';
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
new google.maps.Size(59, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var marker = new google.maps.Marker({
position: myLatlng,
icon: bluePin,
shadow: pinShadow,
map: map,
title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
});
(function (marker, data) {
google.maps.event.addListener(marker, 'click', function (e) {
infoWindow.setContent(data);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
I have the following code. The map doesn't show the markers, but if I click on click for kebab 1, the map open the correct info window. The multidimensional array is needed because I have all data in a database.
Relevant code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>KEBAB TORINO</title>
<script type='text/javascript' ></script>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<style type='text/css'>
#map_canvas{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id='map_canvas'></div>
Click for kebab 1<br/>
Click for kebab 2
<script type='text/javascript'>
var long = new Array();
var long= ["7.681824","7.695342"];
var lati = new Array();
var lati= ["45.074284","45.069611"];
var idkebab = new Array();
var idkebab= ["1","2"];
var tel = new Array();
var tel= ["011 436 1009","011 037 4048"];
var nome = new Array();
var nome= ["Simbad Kebab","Kebab delle Universita"];
var indirizzo = new Array();
var indirizzo= ["Via San Domenico, 1","Via Sant'Ottavio, 31"];
var image = 'kebab.png';
var kebab = new Array();
var i=0;
for (k=0; k<2; k++)
{
kebab[k] = new Array(6);
kebab[k][0] = lati[i];
kebab[k][1] =long[i];
kebab[k][2] =nome[i];
kebab[k][3] =indirizzo[i];
kebab[k][4] =tel[i];
kebab[k][5] =idkebab[i];
i=i+1;
};
var map;
var infowindow = [];
var marker = [];
function get_position(position) {
var punto = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 13,
center: punto,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
var image = 'kebab.png';
var newmarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
icon: image,
title: html
});
newmarker['infowindow'] = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(newmarker, 'click', function() {
this['infowindow'].open(map, this);
});
marker.push(newmarker);
}
function processShips(kebab) {
for (var j = 0; j <2; j++) {
createMarker(kebab[j][0], kebab[j][1], kebab[j][2]);
}
}
function load(kebab) {
navigator.geolocation.getCurrentPosition(get_position);
processShips(kebab);
}
function gotoPoint(myPoint){
map.setCenter(new google.maps.LatLng(marker[myPoint-1].position.lat(), marker[myPoint- 1].position.lng()));
marker[myPoint-1]['infowindow'].open(map, marker[myPoint-1]);
}
window.onload = load(kebab);
</script>
</body>
</html>
the map-property isn't defined yet when you create the markers.
issue#1:
window.onload = load(kebab);
....this will be called immediately, not onload, it has to be:
window.onload = function(){load(kebab);}
issue#2:
geolocating is an asynchronous process, processShips(what invokes the creation of the markers) will be executed before get_position (what initializes the map).
Move the call of processShips(kebab) from load() to the end of get_position()