my (cut down) code is as below. My markers are not showing up until I either click or move the map slightly... is there any way of getting around this so they show up instantly?
<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>TSF - Labour Plan </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(53.644638, -2.526855);
var myOptions = {
zoom: 6,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(51.752927, -0.470095);
var img = "https://dl.dropboxusercontent.com/u/55888592/tsf-logo.gif";
var info = "<img style = 'float: left' src='http://www.tsf.uk.com/wp-content/themes/default/images/tsf-logo.gif'><div style = 'float: right; width: 200px'><p><b>Job Number:</b> </p><p><b>Client:</b> ASDA</p><p><b>Location:</b> HEMEL HEMPSTEAD</p><p><b>Postcode:</b> HP2 4AA</p><p><b>Start Time:</b> 22:0</p><p><b>No of Men:</b> 10.0</p><p><b>Allocated Labour:</b> AB: 5.0, WK: 5.0, : , : , : , : </p><p><b>Job Information: </b>PICK UP TOOLS</div>";
var infowindow = new google.maps.InfoWindow({
});
var marker = new google.maps.Marker({
icon: img,
position: latlng,
map: map,
content: info
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function(content) {
infowindow.setContent(this.content);
infowindow.open(map,this);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
It seems that the problem is still exists in google chrome in most recent version on google map api and marker cluster js.
So I'll post the code which helped in this issue for me.
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(function() {
var cnt = map.getCenter();
cnt.e+=0.000001;
map.panTo(cnt);
cnt.e-=0.000001;
map.panTo(cnt);
},400);
});
feel free to play with value of interval of 400 (in my case less than 400 woudn't fix problem, but higher value - higher lag time)
P.S.
make sure you have defined map variable:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
I was struggling with the EXACTLY same problem and was so glad to hear other guys have the same problem. I experienced the problem with GMaps V3 in Safari and Firefox as well. I tried your solution and it works for me as well but I used the idle event instead the timeout:
google.maps.event.addListener(map, 'idle', function(event) {
var cnt = map.getCenter();
cnt.e+=0.000001;
map.panTo(cnt);
cnt.e-=0.000001;
map.panTo(cnt);
});
Just add it on initializing Google Maps. There might come up another issue working with infowindows and circles bound to markers. In my case I can set the radius of the circle in the infobox. Jumping out of the input field (with or without changing the radius value) makes red-like markers blue. If you then zoom in/out the original color reappears. To solve this problem you have to change the zoom level quickly (in radius_changed event):
map.setZoom(map.getZoom()-1);
map.setZoom(map.getZoom()+1);
I've resolved this calling repaint on markerclusterer variable twice:
mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed
Hope this helps to anyone still facing the issue.
As per Geocodezips comment, this seems to be a local issue.
Related
I found exactly the same question for Java, but I'd like to do that in JS. So, how to add text above a marker on Google Maps in JS?
As stated in my comment, You can use multiple letters for the map marker label.
If you use the label property when instantiating a new google.maps.Marker class, you pass it an object, with one of the properties text.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' }
});
Check the fiddle here.
I think what you're looking for isn't included in the standard library. Google do provide this interesting utility library though so you can make your own markers, labels. The one you want is the MarkerWithLable class. From the link:
This class behaves like google.maps.Marker, but it supports the
association of a label with the marker. If the marker is draggable,
so too will be the label. In addition, a marker with a label responds
to all mouse events in the same manner as a regular marker. It also
fires mouse events and "property changed" events just as a regular
marker would.
Looks like it's used in much the same way a the standard Marker class and there appears to be ample examples of it's use kicking around so good luck and I hope that this was helpful :)
I've attached a quick implementation of the infowindow. Be sure to replace my API_KEY with yours as I've only allowed access to the stack snippets url.
This code snippet creates an infowindow. In the example, the infowindow is called instantly after being created to display it's content above the marker.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var infowindow = new google.maps.InfoWindow({
content: 'Welcome to stackoverflow!'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
infowindow.open(map, marker);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
</script>
</body>
</html>
To only show the infowindow when the marker is clicked, wrap it inside of a listener:
marker.addListener('click', function() {
infowindow.open(map, marker);
});
I am building an app that will have maps showing nearby eateries.
Map shows up, but takes a very long time to load, and never actually fully loads.
I am on a deadline with this, and I've tried a variety of solutions with no luck.
Someone please help!!!
See code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Food & Drink</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<body>
<div id="map" style="width: 360px; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['Little Shebas', 39.833691, -84.892375, 1],
['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
['Joes Pizza', 39.834409, -84.889822, 5],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(39.830184, -84.893401),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
I cannot confirm the behavior you described. Everything seems to be working fine and your code looks like it should work.
Check out this working example of your code. I played around with the inital zoom level and adjusted the center. The center you had specified wasn't really near the markers and the zoom level was so high at first I thought the map wasn't loading.
var center = new google.maps.LatLng(39.833691, -84.892375);
google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I believe the problem in your array. Looking at the code in chrome dev tools it shows the locations array to contain 5 elements (not 6) the fifth of which is undefined. You're missing a comma after the 5th element and have a trailing comma after the last. Trying to access properties on that undefined element is throwing the javascript exception that's halting execution on the page. Also, at the initial zoom you have set nothing is visible. Zooming out reveals the map with your markers. Set your initial zoom in your map options to 14.
I am trying to create a map dialog which allows the user to select his or her desired location.
I have a working example located at http://jsfiddle.net/HCUPa/1/, and the source code is below.
When the infowindow is closed (by clicking the X on the infowindow), how do I remove the associated marker? Do I then need to remove the infowindows name from the array, and if so, how?
Also, when the map (or dialog and then the map) is closed, how do I detect it being closed, and should I be cleaning up any resources, and if so what and how?
I attempted to use addListeners for both as shown in my example, but it isn't working.
Lastly, not really my formal question, but I would appreciate any advise whether I am generally doing this correct. This was my first attempt of the Google map api, and I am still a JavaScript novice, and would appreciate any suggestions, criticize, etc.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#googleMap { height: 100%;width: 100%;}
div.modify-title-bar div.ui-dialog-titlebar {border:0;background-image:none;background-color:transparent;padding:0;margin:0;}
#dialog-map,div.modify-title-bar {padding:0;margin:0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">
function createMap(geocoder,myCenter,address) {
var map = new google.maps.Map(document.getElementById("googleMap"),{center:myCenter,zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP});
var marker = new google.maps.Marker({position: myCenter,map: map,});
var infowindow = new google.maps.InfoWindow({content: '<span>'+address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
google.maps.event.addListener(map, 'close', function(event) {
//How do I detect map closing, what and how should I clean up? Maybe move to dialog close?
alert('close map');
delete geocoder,myCenter,address,map,marker,infowindow;
});
google.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
geocoder.geocode({location: event.latLng}, function(GeocoderResult, GeocoderStatus) {
infowindow.close();
infowindow = new google.maps.InfoWindow({content: '<span>'+GeocoderResult[0].formatted_address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow,'closeclick',function(){
//How do I detect if infowindow is closed? Do I then need to remove the infowindows name from the array, and if so, how?
alert('Remove marker');
marker.setMap(null);
});
});
}
$(function(){
$("#googleMap").on("click", "button.accept", function(){
$('#address').val($(this).parent().children('span').eq(0).text());
$("#dialog-map").dialog('close');
});
$("#findIt").click(function(){$("#dialog-map").dialog("open");return false;});
$("#dialog-map").dialog({
autoOpen : false,
resizable : false,
height : 500,
width : 800,
modal : true,
dialogClass : 'modify-title-bar',
open : function() {
var address=$.trim($('#address').val()),
geocoder=new google.maps.Geocoder,
LatLng,
//Default LatLng
Ya=47.6204901, Za=-122.34964839999998,
//Give default address to limit geocoder calls
default_address='400 Broad Street, Seattle, WA 98109, USA';
if(address) {
geocoder.geocode({address: address}, function(GeocoderResult, GeocoderStatus) {
if (GeocoderStatus=='OK') {
LatLng=GeocoderResult[0].geometry.location;
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
adderss=default_address;
}
createMap(geocoder,LatLng,address);
});
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
createMap(geocoder,LatLng,default_address);
}
}
});
});
</script>
</head>
<body>
<button id="findIt">Find it on a map</button>
<input id="address" type="text" value="1600 Pennsylvania Avenue Northwest Washington, DC">
<div id="dialog-map" title="Select a location">
<div id="googleMap"></div>
</div>
</body>
</html>
Create a new function that listens for the infowindow close event
function infowindowClose(infowindow, marker) {
google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
marker.setMap(null);
});
}
Call that everytime you create a new infowindow.
Working Demo
You are doing well for your first time using the API. If you want more than one marker and infobox then you will need to make a few changes, otherwise it's fine.
Hi everyone I try to use geolocalization for my webside made with joomla
I obtained the latitude and longitude and fine... But dont show me any map
In my code I am drawing the map inside a div
this is my code
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions= {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marcador = new google.maps.Marker();
marcador.setPosition(pos);
marcador.setMap(map);
}, function() {
alert("su navegador no acepta geolocalización");
});
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
in my head I have this
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
and his in my body
<div id="map"></div>
I have been read other post with the same problem, but I don't find the error in my code.
Thanks
There are some small errors in your code - hint: try using the Javascript console in Chrome to see these errors:
You do not have 'pos' defined here: marcador.setPosition(pos);
...and you want to create a marker with it, so you have to use the LatLng object
give your div a width and height (if you have not done it in your CSS file)
Here is a JSFiddle with all there errors fixed
Where is pos defined? This will most likely cause a JS error which will prevent the map displaying.
marcador.setPosition(pos);
Give your div a size(width and height):
<div id="map" style="width:400px;height:300px"></div>
You need to set width and height values for your #map and make sure the init() is called
here my jsfiddle : http://jsfiddle.net/3MTtc/1/
I have multiple locations of my company's regional offices and have to show each location whenever user clicks at a locations like:
location1
location2
location3
When user clicks at location 1 it will show location 1 on the map. I also have those locations in my maps. I have never worked with Google maps before, so I just need some idea to get started.
When your user clicks a link, run a piece a javascript that calls setCenter(latlng:LatLng) on the map to center the map to a certain location.
If you really don't know where to begin, then start by reading the Google Maps API documentation. It's easy to read, and it contains lots of working examples.
You can do something like this: (I'm sure it could be optimized with a for loop, its early/late right now.
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint1 = new google.maps.LatLng(44.6479, -63.5744); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(45.5081, -73.5550); //Second Location
var marker2 = new google.maps.Marker({
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click',//Set up DOM listener 2
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(43.6481, -79.4042); //Third Location
var marker3 = new google.maps.Marker({
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 3
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
map.setCenter(marker2.getPosition());
map.setZoom(5);
}
</script>
</head>
<body onload="initialize()"> <!--Initalize JS after onload--->
Halifax
Montreal
Toronto
<div id="map_canvas" style="height:100%; width:100%"></div>
</body>
</html>
And after I write this I realize the post was from last August. Oh well, may help someone at some point.