I currently have created markers but I want to be able focus/show the marker's infowindow on click of a separate list of those marker names. How do you accomplish this? I couldn't find anything online.
javascript:
<script type="text/javascript">
var infowindow;
var locations = { 0: { lat: 32.42, long: -99.68, name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' },
1: { lat: 35.42, long: -95.68, name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }
}
var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
var myOptions =
{
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
$.each(locations, function(key, value)
{
var location = new google.maps.LatLng(value.lat,value.long);
var marker = new google.maps.Marker({
position: location,
map: map,
title:value.name
});
markerBounds.extend(location);
map.fitBounds(markerBounds);
attachSecretMessage(marker, value);
});
function attachSecretMessage(marker,value)
{
google.maps.event.addListener(marker, 'click', function()
{
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow(
{ content: value.info,
size: new google.maps.Size(50,50)
});
infowindow.open(map,marker);
});
}
</script>
html body:
<body>
<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>
</body>
You would need to hold all your Markers in an Array so you could search through that and find the appropriate Marker. Once you have that you can call the click event handler, or just make the infowindow and open it as you do in the event handler.
But the important part is that you keep your markers in an Array because that is the only way you will be able to reference them again after they have been created.
Related
I am making an aspx page to track vehicles. The only thing I am sticking with is that I don't know how to remove tooltip text from google markers.
The data is displaying correctly.
In the image above, (1) is being shown when I am taking my cursor on marker image and (2) is coming when I am clicking on the marker.
I want to hide (1). How to do that?
I am using the following code:
function initMap() {
var image = '../images/FireTruck.png';
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
Don't set the title property of the marker (that is what sets the tooltip).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title, // <<<<<<<<<<<<<<<<<< REMOVE THIS
icon: image
});
I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();
I am trying to add a Google maps InfoWindow Dynamically to Wordpress, this is the code that is currently working with a custom marker I have tried several functions for infowindows but it seems to be breaking and not loading the map. not sure what I might be doing wrong.
this works I just need to add a infoWindow
<script type="text/javascript">
//<![CDATA[
function load() {
var styles =
[
{
"stylers": [
{ "lightness": 1 },
{ "saturation": -76 },
{ "hue": "#3bff00" }
]
}
];
var lat = <?php echo $lat; ?>;
var lng = <?php echo $lng; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 14,
scrollwheel: false,
center: latlng,
mapTypeId: 'Styled'
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
}
// call the function
load();
//]]>
</script>
A simple infowindow would be (not tested):
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infowindow.setContent("Hello world");
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, "click");
}
// call the function
Just add this code:
var contentString = 'put your content here.';
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
maxWidth: 200
});
infowindow.open(map);
});
More info about Info Window you can read HERE.
I have a java script function which I am using to display a marker on the selected position of the map and also show the latitude and longitude at the marker's location in a InfoWindow.
I could display the marker at any location but unable to show a InfoWindow with the coordinates.
This is the function:
function init()
{
var mapoptions=
{
center: new google.maps.LatLng(17.379064211298, 78.478946685791),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
var marker;
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
});
var iwindow= new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
}
Where am I wrong? Suggestions please.
This is because you attach event to an empty marker object (it is unassigned at the moment when you invoke
google.maps.event.addListener(marker,'click',function(event) { ... });
Try attaching click event to the marker after you create it, e.g.:
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
});
You can try this snipped code :
function addMarkerWithTimeout(position, timeout, id) {
window.setTimeout(function () {
markers.push(new google.maps.Marker({
position: position,
map: map,
icon: image1,
title: "whatever!",
draggable: true,
animation: google.maps.Animation.ROUTE
}));
google.maps.event.addListener(map, 'click', function (event)
{
google.maps.event.addListener(markers[id], 'click', function (event)
{
infoWindow.setContent(event.latLng.lat() + "," + event.latLng.lng());
infoWindow.open(map, markers[id]);
});
});
}, timeout);
}
Im having some problems with a street view map: http://server.patrikelfstrom.se/johan/fysiosteo/?page_id=118
Sometimes the window gets grey instead of showing the streetview. So my question is; Is there any way to know when the map has finished loading? I guess its treying to render the map before its completly loaded? Thanks
function initialize() {
var myLatlng = new google.maps.LatLng(57.6988062, 11.9683293);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Fysiosteo"
});
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 90,
pitch: 0,
zoom: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'idle', function() { console.log('done'); });
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
I tried with this code to print "done" to the console when the map has finished loading, but it didnt work. Am i doing it wrong? :)
The answer to your specific question ("Is there any way to know when the map has finished loading?") is: Yes. When a Map object is finished loading, it will trigger an idle event. Documentation of events that a Map object fires can be found at http://code.google.com/apis/maps/documentation/javascript/reference.html#Map.