How to disable Google Map MouseOver - asp.net

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
});

Related

Show One WindowInfo Per Marker(Google Map)

I try this but I can only last windowInfo.
Help me please
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(33.414837,54.68141),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
/*var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.Degree
});
weatherLayer.setMap(map);*/
/*var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map)*/
for (i = 0; i < StationListArray.length; i++) {
var image = StationListArray[i].split("|")[4];
var StationLocation = new google.maps.LatLng(StationListArray[i].split("|")[2], StationListArray[i].split("|")[1]);
var marker = new google.maps.Marker({
position: StationLocation,
map: map,
title: StationListArray[i].split("|")[0],
icon: image
});
google.maps.event.addListener(marker,'click',function() {
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"});
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Change the 2nd argument of open() to this
infowindow.open(map,this);
marker refers to the variable marker, which will be overwritten on each iteration. When the loop has been finished, it points to the last marker that has been created. this inside the click-callback refers to the marker that has been clicked.

Google maps Initial marker won''t show up

The code I found for this google map seems to work fine but, The initial marker isn't showing up when I load the map. The map is centered on the initial location but with no Marker. I'm using the php to populate the initial Lat and Lon. Also is there a way to remove the old marker once dragged to a new location?
// global "map" variable
var map = null;
var marker = null;
// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
function initialize() {
// the location of the initial pin
var myLatlng = new google.maps.LatLng(<?=$a1[lat]?>,<?=$a1[lon]?>);
// create the map
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
draggable: true
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// establish the initial marker/pin
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
draggable: true
});
// establish the initial div form fields
formlat = document.getElementById("latbox").value = myLatlng.lat();
formlng = document.getElementById("lngbox").value = myLatlng.lng();
// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// Information for popup window if you so chose to have one
marker = createMarker(event.latLng, "name", "<font color=#660000><b><?=$a1[name]?></b><br>"+event.latLng);
var image = '/images/googlepins/pin2.png';
var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Property Location"
});
// populate the form fields with lat & lng
formlat = document.getElementById("latbox").value = event.latLng.lat();
formlng = document.getElementById("lngbox").value = event.latLng.lng();
});
}
//]]>
The Map-Tag needed to be added. I had someone try help me but, when his answer created more problems he removed his answer and then down voted my question.... Thanks Buddy.. Here is where the Map-Option needed to go.
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// establish the initial marker/pin
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
map: map, /// <-------This is what I added and seems to have fixed my problem
draggable: true,
});

How do you activate an existing marker to show its infowindow on clicking a separate link in Google Maps v3?

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.

Google maps API v3 infowindow not displaying

Can't fathom why the info window won't display on this page...
http://www.triangledesign.biz/contact-dev.php
Also noticed the google example has no info window...
https://google-developers.appspot.com/maps/documentation/javascript/examples/infowindow-simple.
Code...
var mapOptions = {
center: new google.maps.LatLng(51.539104, -2.400264),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = 'cup-sm.png';
var myLatLng = new google.maps.LatLng(51.539104, -2.400264);
var contentString = '<div id="content" style = "width:100px;height:100px;background:white">test content</div>';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"Get In Touch",
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Create Marker Categories & Display Markers on Click Only

I am trying to create marker categories and display markers on click...
For example, "Eat", "Banks", "Places of Interest" and clicking on them would produce only the markers in those categories. You can see it live HERE
Here is a code snippet:
//<![CDATA[
//<![CDATA[
var map = null;
var gmarkers = [];
var gicons = [];
var icon = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(37.979183,-121.302381),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
///////////////////////// EATS //////////////////////////////////////////////
var point = new google.maps.LatLng(37.988012,-121.311901);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/tigeryogurt.jpg" /></center><br><b>Tiger Yogurt</b><small><br>4343 Pacific Avenue<br>209.952.6042<br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[0]
var point = new google.maps.LatLng(37.987054,-121.311655);
var image = 'icons/orangepointer.png';
var marker = createMarker(point,'<div style="width:205"><center><img src="icons/mwbakery.jpg" /></center><br><b>M&W Bakery<br>Cakes & Sandwiches</b><small><br>4343 Pacific Avenue<br>209.473.3828<br><br>On the web visit:<br><a href="http://www.mandwdutchamericanbakery.com" target ="_blank">MandWDutchAmericanBakery.com<\/a><br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);
// this will be gmarkers[1]
Currently, all markers display. I can easily get the markers not to display... however, i am trying to have only categories display and individual listings to display on click only!
CREATE MARKER FUNCTION:
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function triggerClick(i) {
google.maps.event.trigger(gmarkers[i],"click")
};
function createMarker(latlng, html, img) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: img,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
}
I would think the simplest way to do it would be to assign your markers to arrays, with each marker upon creation having setMarker(null). You'd either use a separate array for each category, or a single array of objects each with a category attribute. Then when the user clicks on a category you would iterate through the appropriate array and setMarker(map) for each of its markers.

Resources