I have another question which needs resolving as it is rather irritating. I have been working on an app for a while and i managed to get it working nicely.
Specifically, the google map feature is supposed to have markers which appear and when you click on them, the screen is supposed to zoom in and display some information regarding the marker. Now, I have coded this in and it works perfectly when you test it out on Chrome. But when I tried to port it over to the tab device itself (Samsun Galaxy), there is no activity whenever i try to touch the markers whatsoever.
I am rather baffled and miffed by this, as the action of touching the marker should be the same as clicking on it using a mouse, am I not mistaken? I was wondering if anyone else could give me any help with this, as it is something minor which is causing one hell of a hiccup for me.
The code I have added below:
var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
trafficMarker = new google.maps.Marker({
position: new google.maps.LatLng(TrfAl.lat, TrfAl.lon),
animation: google.maps.Animation.DROP,
map: mapPanel,
icon: marker_icon,
id: 'trafficAlertPanel' + i,
componentId: 'trafficAlertPanel' + i,
});
markerArray[i]=trafficMarker;
google.maps.event.addListener(trafficMarker, 'click', function(){
console.log('clicked!');
LoadIncidentMap(this.id.substring(17));
});
For some reason click events don't fire for taps on android and iOS. One work-around is to use the 'mousedown' event instead, which will fire on tap.
google.maps.event.addListener(trafficMarker, 'mousedown', function(){
console.log('clicked!');
LoadIncidentMap(this.id.substring(17));
});
Related
I am using custom markers on Google Maps, and they work perfectly on browser mode, but the problem happens with device, I can't get picture of marker, not sure if I am placing image of marker right.
This is the code I am using.
var marker = new google.maps.Marker({
position: myLatLng,
map:this.map,
title: 'Pumpa',
icon: { url: "../assets/img/2.png",
scaledSize: new google.maps.Size(30, 30)
} });
any clues where should I put marker image and what path should I use then.
Not sure what the downvotes on the previous answer are about, using
url: "assets/img/2.png"
works for me
i think you need to remove the 2 dots in url of icon
I'm experiencing an very annoying problem with Google Maps. When I embed Google Maps for my company it shows another unrelated company in a white pop-over when I hover the label on the map. When I click my company label (the red company name on the map) it switches the address inside the white box in the upper left to that company but does not move the map pointer.
At first, when my company name was slightly different the other company was a company in India with a name that was similar and was also a webdesign agency. In the meanwhile I had slightly changed the displayed company name in Google Places. Now the change has been adopted by Google Maps and the issue persists. Only this time it is showing another company, in the UK, also a webdesign agency, the name is not similar.
To further clarify my issue I have attached screenshots.
I hover over my company label, the white popover shows the unrelated company name. (Screenshot 1)
I click 'my company label' (Screenshot 1)
The view changes to that in screenshot 2.
Note that this issue only occurs when Google Maps is embedded and set to point to my company.
I have already reported this issue to Google two weeks ago but I didn't receive any response yet.
Screenshot 1 (The state when hovering my company label)
Screenshot 2 (The state when company label has been clicked)
I am aware of the fact that stackoverflow is no customer service for Google but I am wondering if anyone else has experienced this issue as well. In case the issue is just a bug and I just have to wait for a fix, I would like to know if anyone has a workaround for this as it is quite embarrassing that Google Maps shows another company when you hover my company. Especially because the other company is also in the business of webdesign.
What's happening: Your code asks google to search your company ... and something goes wrong.
If you only have 1 marker, obviously you (the programmer) search the location (1 time), and you put it in your code.
Then you will never see that Indian company anymore.
Here is a simple example of a map, a marker and an infoWindow.
Is this what you want? Can you take it from here?
Any feature that's missing?
EDIT: oh yes ... I used a 'click' on line 31. You can change 'click' by 'mouseover'; then the infowindow is shown when hovering.
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
// making the map. Initialization
function initialize() {
// company location:
var companyLocation = {lat: 52.0400564, lng: 4.3483506};
// company logo:
var urlCompanyLogo = 'https://lh3.googleusercontent.com/-ON8pWapB8Ro/AAAAAAAAAAI/AAAAAAAAAGo/wiwqSbfDyxg/s60-p-rw-no/photo.jpg';
// content of the infowindow
var companyDetails = ' <img class="logo" src="' + urlCompanyLogo + '"> <h3>Kermit industries</h3> Retrieving any golf ball from the pond';
// the map
var map = new google.maps.Map(document.getElementById('map'), {
center: companyLocation,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 18
});
// the marker
var marker = new google.maps.Marker({
position: companyLocation,
map: map,
title: 'Kermit industries'
});
// the infowindow
var infowindow = new google.maps.InfoWindow({
content: companyDetails,
position: companyLocation,
map: null // first set it to null, only show it after a click on the marker
});
// when the user clicks on the marker, the infowindow will appear
marker.addListener('click', function() {
infowindow.setMap(map);
});
}
// this will lauch the initialization once the page is loaded
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map {
height: 500px;
}
.gm-style-iw .logo{
float: right;
}
</style>
<div id="map"></div>
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
I have a map with a google marker, but I would like to do some fun things with it like post a link in there, and format the text there to have an information item per line instead of all in one line.
Is that possible? If so, then what can be done and how? :)
Here is my current boring map and marker at the bottom of this page:
http://www.comehike.com/outdoors/parks/trailhead.php
You could do:
<script...
var marker = new GMarker(point);
map.addOverlay(marker);
var myHtml = "<your html here/>";
GEvent.addListener(marker, 'mouseover', function() {
map.openInfoWindow(point, myHtml);
};
.../>
where
<your html here/>
is what you want to show, for example image and contact info or something.
That is if you want the info window opened on mouseover event. You could either open it by default by calling that function ( map.openInfoWindow(point, myHtml) ) right away.
Hope that helps.
I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}