I have a java-script function that doesn't want to run. The weird thing is that other functions in the code run fine. The function I'm having trouble with is addMarkers(). I even went so far as to copy the addMarker() function and then change the name. When I call addMarker() it runs perfectly but when I call addMarkers() it doesn't work at all despite being the same thing and being right next to the other one.
What am I missing?
var markers = [];
var map;
function initialize() {
var mapOptions = {
zoom : 2,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
setAllMap(null);
}
// Shows any overlays currently in the array.
function showOverlays() {
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteOverlays() {
clearOverlays();
markers = [];
}
function resetMap() {
map.panTo(new google.maps.LatLng(0, 0));
map.setZoom(2);
deleteOverlays();
}
function addMarker(lat, lng) {
markers.push(new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map : map,
draggable : false,
animation : google.maps.Animation.DROP
}));
}
function addMarkers(lat, lng) {
markers.push(new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map : map,
draggable : false,
animation : google.maps.Animation.DROP
}));
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML document that runs the script
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API Testing</title>
<!--meta http-equiv="refresh" content="120"-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #B0C4DE;
}
#map-canvas{
height:1020px;
width:1040px;
border: 5px black solid;
position:absolute;
top:100px;
left: 5px;
}
form{
position:relative;
left: 20px;
top: 15px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?Key={AIzaSyBLp3nQtaofsWbtwTH4rwgOoPJ8fARnUPA}&sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
</head>
<body onload="addMarkers(0,0)">
<div id="map-canvas"></div>
<form name="form">
<input type="button" value="Reset Map" onclick="resetMap();" />
<br />
Lat: <input type="number" name="lat"/>
Lng: <input type="number" name="lng" />
<br />
<input type="button" value="Drop Icon" onclick="addMarker(form.lat.value, form.lng.value);" />
</form>
</body>
</html>
Your script, as it is, works for me(sometimes).
The issue: you have two functions that will be called onload(addMarkers and initialize).
But addMarkers will only run successfully when it will be called after initialize(otherwise map will be undefined).
As you don't have any control over the execution-order of both functions, you better move the call of addMarkers to the end of initialize.
Related
Messing around with the Google Maps API in a browser, however I'm having a bit of trouble putting in a user input for the variables. Essentially, I want to be able to put in a new lat/long from pressing a button on the page and have the map move onto that.
It doesn't work for the actual input variables, but when I use the commented out section it works perfectly fine.
<body>
<form id = "input" method = "get">
<input type = "text" placeholder = "Latitude" name = "user_lat">
<input type = "text" placeholder = "Longitude" name = "user_lng"><br>
<button type = "submit">Mark on Map</button>
</form>
<div id = "map"></div>
<script>
var lat_in = parseFloat($('#user_lat').val());
var lng_in = parseFloat($('#user_lng').val());
/*var lat_in = 37.697948;
var lng_in = -97.314835;*/
function initMap() {
var location = {lat: lat_in, lng: lng_in};
/*var location = {lat: 37.697948, lng: -97.314835};*/
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script async defer
src="link with the API key here">
</script>
I suspect it might have something to do how I actual use the submit button and the way I interact with it, but I'm not 100% sure. I've looked up different things, but I'm still a bit new at this. I just started to dabble in javascript, so I'm sure there are better methods to do this, but I just want to get this working to get an understanding of it.
You can do it like this, Add change listener and on change pan to that location by clicking enter
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<input id="start" type="text"
placeholder="Enter lat">
<b>End: </b>
<input id="end" type="text"
placeholder="Enter lng">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 0, lng: 0}
});
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: {lat: 0, lng: 0}
});
var onChangeHandler = function() {
DisplayPoint(map);
};
//document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
function DisplayPoint(map) {
var lat = document.getElementById('start').value;
var lng = document.getElementById('end').value;
var latLng = new google.maps.LatLng(lat, lng);
marker.setPosition(latLng);
map.panTo(latLng);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap">
</script>
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
Assume I have put a marker at a specific location on the Map.
I want the program to open a pop-up window called bla.php when the user click on this marker.
This is what I already done to put the marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxVucBtLP4XefoM4syoigBgXntwkVGxv8&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48, 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var position = new google.maps.LatLng(48,2);
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setTitle("pv-unit");
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
I tried it, the whole map is not loading
First you need an event listener for your marker. Then within that, whatever code you want for opening a popup, e.g.
google.maps.event.addListener(marker, 'click', function() {
window.open('blah.php','name','height=200,width=150');
});
So I am preparing a page which has a Google Map and there are two forms namely latitude and longitude , and a submit button.
On entering the longitude and latitude the map is centered to the desired location and puts a marker there.
The problem I am facing is that whenever I put a new lat/long , the old marker won't go.
So basically if entered first lat/long : 10/12 , it would center to that and place a marker there, but when i enter the second lat/long (say) : 11/12 , it would center to that too and place a marker there also while the first one is not removed.
I want the page to be whenever the a new entered in the form only that one reflects in the form no old markers.
Here's my CODE :
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
Some help would be useful
You need to clear markers each time in order to do that.
To clean marker keep marker as global variable, eg.
function pan() {
try{
marker.setMap(null);//clear marker
}
catch(err){
}
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
//declare marker as global variable
marker = new google.maps.Marker({
map: map,
position: panPoint,
});
}
That should do the trick.
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
In the pan function before adding the new marker, try to remove all the present markers Google Maps API v3: How to remove all markers?
I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)
Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>