My Google map works okay but the mouseover and mouseout are not showing the div. Can anyone see my mistake or what I have done wrong? I have jquery installed on my host server.
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
descrip:contentstring,
link:'https://www.google.ie/'
})
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
});
}
$(document).ready(function(){
initialize();
})
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div>
</body>
</html>
Thanks in advance for any help.
From the code above, It doesn't look like you have defined the variable 'tooltip'
Instead of passing descrip and link properties to your marker_0, try just passing the title and it works. Like this...
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
title: contentstring
//descrip:contentstring,
//link:'https://www.google.ie/'
})
/*
** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP **
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
}); */
}
There is a Simple Marker Exmaple Here
The properties that can be used for the marker is listes in the DOCS.
Hope this helps.
Related
I would like to show a location on google map, but I don't know where is my wrong. not showing any thing :
<div id="map-canvas" style="width:100%; height:300px;">
</div>
.
.
.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>
</body>
updated
my console messages :
Using //# to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: expected expression, got '<' myjs.js:1:0
TypeError: $(...).position(...) is undefined
custom.js:308:20
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
I think you need include jquery library, because you are using $(document).ready(function() .
I have updated your code by adding jquery library. Please try the below code , hope it will work.
<div id="map-canvas" style="width:100%; height:300px;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>
I'm trying to create a multiple markers map. Every marker will have his infoWindow. I followed all the dev GoogleMaps information and infoWindow are still not appearing.
In this code that I'll give to you, I only create 3 markers with my own function "PintaMarker". This function creates a marker and adds its listener with the infowindow information and pushes the marker to my "markers Array" called markers.
When I finish the creation of the markers, I generate a MarkerClusterer to use and see all markers I create.
Can anyone take a look at my code and give me a hand on it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Markers Map</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--script src="js/bootstrap.js"></script-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
</head>
<body>
<div id="map1" style="width:100%; height: 913px"></div>
</body>
<script>
var markers = [];
var map1=null;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function pintaMarker(lat,lng,html){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1,marker);
console.log(infowindow);
});
markers.push(marker);
}
$(document).ready(function() {
//var center = new google.maps.LatLng(41.644183,1.620483);
geocoder = new google.maps.Geocoder();
var center = new google.maps.LatLng(41.38257066,2.15659028);
var options = {
zoom: 16,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("map1"), options);
pintaMarker(41.385, 2.154, 'hola');
pintaMarker(41.387, 2.1529, 'hola2');
pintaMarker(41.38254, 2.1562, 'hola3');
var markerCluster = new MarkerClusterer(map1, markers);
});
</script>
</html>
Thank you!
The porblem ist that in your function pintaMarkerthe map1 object is null!!
The solution:
Pass the map object as a parameter to your pintaMarker like this:
pintaMarker(41.385, 2.154, 'hola', map1);
and update you function to:
function pintaMarker(lat,lng,html, map1){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1, marker);
console.log(infowindow);
});
markers.push(marker);
}
now the map object is available!
Hey guys hoping for a little help here.
First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.
Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google's example page.
Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up :(
http://leongaban.com/_stack/googlemaps/
Please Help!
Goals:
Use my Google maps API key
Remove the Map view option buttons
Put overlay pointer on the location.
Code for my first map with my google API 2 key:
<head>
<title>Test Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// var myOptions = {
// zoom: 16,
// center: new google.maps.LatLng(40.750159, -73.976473),
// disableDefaultUI: true,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// }
// var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// var point = new GLatLng(40.750159, -73.976473);
// map.addOverlay(new GMarker(point));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.750159, -73.976473), 13);
map.setUIToDefault();
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
map.addOverlay(new GMarker(myGeographicCoordinates));
// map.addOverlay(new GMarker(40.750159, -73.976473));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
UPDATED
WORKING CODE! THANKS STACKERS!!!
<head>
<title>Test Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
There's a problem with how you define your latLng objects.
new GLatLng(40.750159, -73.976473);
That was used with Google Maps Api v2. Now you're using the latest api(v3), and in new api, this is how you should do it:
new google.maps.LatLng(40.750159, -73.976473);
EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:
var marker = new google.maps.Marker({
map: map,
position: latLng
});
Following code sets a map, disables default UI, sets a marker and put it on the map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates
});
}
Now that you have moved to the v3 API, you want to change your marker creation code from:
map.addOverlay(new GMarker(myGeographicCoordinates));
to:
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
If you want, you may also define a custom marker icon in the MarkerOptions that are passed to the marker constructor function and set the value equal to the path and name of an image file:
var marker = new google.maps.Marker({
map: map,
icon: "images/my-nice-marker.png",
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
I have two locations (markers) to display on a google map, one is a static variable called "companyLocale". The second is a dynamic variable based on your current location "initialLocation". I am trying to group them into an array called "localArray" but I can't get the "companyLocale" variable to display within the array . Can someone please help me?
<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>Google Maps JavaScript API v3 Example: iPhone Geolocation</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var initialLocation;
var companyLocale = new google.maps.LatLng(33.206060, -117.111951);
var localArray = [initialLocation,companyLocale];
var noGeo = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
function initialize() {
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Safari supports the W3C Geolocation method
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var placeMarker = new google.maps.Marker({
position: initialLocation,
map: map,
});
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation();
}
function handleNoGeolocation() {
initialLocation = noGeo;
map.setCenter(initialLocation);
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You're populating localArray with the two values before your initialize function gets called. As you've already defined companyLocale as a LatLng, that one is fine, but you don't create the initialLocation LatLng until later in your execution.
I would say remove initialLocation from the array initially. Then after you create it, add it into the array. I don't know if the order of the array items is important here for you or not. If it isn't, just use .push() to append it into the array. Otherwise use unshift() to prepend it.
<script type="text/javascript">
var initialLocation;
var companyLocale = new google.maps.LatLng(33.206060, -117.111951);
var localArray = [companyLocale];
var noGeo = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
function initialize() {
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Safari supports the W3C Geolocation method
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
localArray.unshift(initialLocation);
var placeMarker = new google.maps.Marker({
position: initialLocation,
map: map,
});
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation();
}
function handleNoGeolocation() {
initialLocation = noGeo;
localArray.unshift(initialLocation );
map.setCenter(initialLocation);
}
}
</script>
i have these two lines
map.panTo(respectiveMarker.getPosition());//Center in map the respective marker
infoWindow.open(map, respectiveMarker);
When infoWindow.open is executed the map pans to the edge.
If i remove this line the map pans to the marker as expected.
Any ideas?
Since you're using the v3 API you could simply prevent the infoWindow from shifting the map with the disableAutoPan option.
Complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps disableAutoPan Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 200px; height: 200px"></div>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(37.44, -122.14);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Test',
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test Marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</script>
</body>
</html>
Screenshot:
There is no equivalent to the disableAutoPan in the v2 API's GInfoWindowOptions, and I am not aware of any workarounds for this.