Bit of a strange one - I created a google maps area for a contact page on a site I'm working on. All worked fine voila etc. I went back to change some more stuff on the page today and the icon has completely disappeared. The map still generates and displays fine - only the icon is missing. My img path is still correct and nothing else has changed. I seemed to vaguely remember this happening during original build but it may have fixed itsself. Has anyone else came across similar things?
My JS for the map is here - When I deliberately change to a non existent or non valid var the map wont generate so I;m not entirely certain it is an error with this code.
any help would be massively appreciated. Thanks,
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.865151,-2.234739);
var settings = {
zoom: 16,
center: latlng,
mapTypeControl: true,
scrollwheel: false,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyLogo = new google.maps.MarkerImage('img/gmap-icon.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(51.865151,-2.234739);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyLogo,
title:"10 Yetis HQ"
});
}
</script>
I think you have a problem with browser cache. Clear your cache every time to make a change of you will be seeing a mixed version of changes.
Also, because you are using javascript, most paths are not relative. Try using absolute urls. For example:
var companyLogo = new google.maps.MarkerImage('/img/gmap-icon.png', ...);
I faced a similar situation like this , try to change icon path directly to the physical path
Icon: "images/greymarker.png"
or else you can even use
companyMarker.setIcon("images/bluedot.png");
Hope this helps :D
thank you both for the answers :) unfortunately it was something more simple. My JS was executing before my dvi had been rendered in the DOM - I noticed a few errors in the JS console on Chrome and sorted it. thank you both!!
Related
I'm loading large KML layers using the google maps API and geoxml3, via parseKMLString.
Relevant question and Example using this function.
While these files are being rendered to the map, the UI is frozen. As this is using google maps, I can't put this code in a Worker and wrapping this in a promise isn't going to change anything.
Relevant code block:
var latLong = new google.maps.LatLng(37.0902, -95.7129);
var myOptions = {
center: latLong,
zoom: 10
};
myMap = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
geoXmlParser = new geoXML3.parser({
map: myMap ,
singleInfoWindow: true
});
geoXmlParser.parseKmlString("long-kml-string", geoXmlParser.docs);
I'm also open to alternatives to both loading these files and other libraries that may exist to assist.
I'm giving cordova an honest shot (via ionic cli) and it's going pretty well functionally but the UX screams non-native. Here's my current implementation:
Here's an example from where I got my initial maps code
index.html
...
<script src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry"></script>
...
templates/map.html
...
<div id="map" data-tap-disabled="true"></div>
...
MapCtrl
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
//google.maps.event.addDomListener(window, 'load', initialize);
ionic.Platform.ready(initialize);
});
how I initiate a marker in MapCtrl
var marker = new google.maps.Marker({
map: $scope.map,
position: o.getLatLng(),
icon: {
url: thumb, // "img/somethumb.png"
scaledSize: new google.maps.Size(62, 62), //size
// origin: new google.maps.Point(0, 0), //origin
anchor: new google.maps.Point(30, 108) //anchor
}
});
In my journey of making the UX more friendly on better-performance devices every now and again I find a glimmer of something helpful and then it turns out to be a hack that doesn't help much. There has to be some way to get a more native feel out of this code. Here are some issues I would like to smooth over:
new map images don't load until the user releases ALL touches after a pinch/zoom
markers do not resize until the user releases ALL touches after a pinch/zoom
uses bitmap images as opposed to vector (html5 canvas?)
I'm sure there's more to improve but I'm starting small for now. What are some things I can do to make API work with a more native feel?
new map images... this behavior is on the desktop not only on mobile. This is to save resources (given that you have done number of native apps you haven't run into this requirement.
markers do not resize... this would be considered a nice to have and not necessary, this behavior doesn't hinder the usability of the application. In the end is an application not a game.
bitmap vs vector, the application has to support several devices. Why make 2 versions when the bitmap works well? See the browser requirements and limitations of some one that has developed a vector/html5 version http://simplemaps.com/us
here is my code in html to generate marker and infowindow(with ruby on rails)
var marker=[]
function initMap() {
var latLng1 = new google.maps.LatLng(1.352083, 103.819836);
var myOptions = {
zoom: 12,
center: latLng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
for(i=0;i<gon.astatic.length;i++){
var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]);
if(i<2){
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerV.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});}
else
{
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerN.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});
}
var iw =new google.maps.InfoWindow({content: 'HI' });
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
}
this gon is just some 'stupid' method I use to pass data from ruby on rails controller to javascript.
for all marker,the infowindow all appear at corner.
But for my another map(which have only one marker with infowindow)it works fine.
What might be my problem?why this infowindow appear in wrong position?Instead of just above the marker?
EDIT:
After half day's trouble shoot,I feel the problem is at
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
when the listener calls back,the value inside marker is i ,which is not a actual number,so the marker display at a corner.I feel the problem is can't pass variable into addListener,can only put in actual number.How to solve this?
Each instance of the function declared inside the for loop shares the same closure containing the value i, and so all of your addListener calls are essentially calling iw.open(map, undefined) since i will be off the end of the array at the end of the iteration.
See JavaScript closure inside loops – simple practical example for sample solutions to this problem, and How do JavaScript closures work for more information about closures in JavaScript in general.
The problem is with your MarkerWithLabel library. Infowindow take position from marker. Try use this link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html . It has all the things that you want to implement. It it's not work then you can also set position for infowindow with setPosition() function just pass latlng that you used to create marker and you are done.
i dont recommend using new gem just to pass data from ruby to js...you can do this simply by many ways...your code seems good but i cannot say how gon is handling your js script.Please take a look at this similar question where i have implemented the same dynamic map with dynamic markers and infowindows.This code is working great
see here
My map redraws seem to be failing because (at the least) I have been dynamically setting the center via
var currCenter = gmap.getCenter();
Then:
var mapOptions = {
center: new google.maps.LatLng(currCenter.ob, currCenter.pb),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Appears currCenter.ob is suddenly undefined this morning. It now looks like it's pb & qb instead of ob & pb. I'm in the process of trying to fix the code, is there anything else anyone knows of that was changed?
EDIT: They're undocumented API fields I shouldn't be using, nevermind I fixed it with the info below. Thanks.
I am assuming gmap is a google map object. If that is the case, then getCenter already returns a LatLng object, so creating a new object via
new google.maps.LatLng()
Is somewhat useless, you could simply use currCenter directly.
The problem is that Api Google maps constantly changing this values (ob, .pb) to Latitude and Longitude, you must use lat() and lng() functions to have a stable version
var mapOptions = {
center: new google.maps.LatLng(currCenter.lat(), currCenter.lng()),
zoom: currZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
greetings!
To answer you question. YES. Google Maps API did changed last night. I was doing the same thing you did (calling .ob and .pb), but found that I had to change them to .pb and .qb in my code respectively in order to get the Lat and Long.
Rewrote them as .lng() and .lat() instead of .ob, .pb, .qp. I believe that these members should be more stable if you still want to use unofficial member names.
I'm trying to add a few tweets to an infowindow in Google Maps. I get the tweets to display in a div that is the content of my infowindow, but it's the wrong size.
I thought by calling 'content_changed' when the marker is clicked, the infowindow would resize - it doesn't.
I'm sure this is pretty straightforward, can someone help me out?
Thanks,
James
var myLatlng = new google.maps.LatLng(51.500261,-0.126793);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById("station"));
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.open(map,marker);
});
Try to call infowindow.close(); before open(). I'm pretty sure that it will force it to rerender
This isn't exactly a supported solution, but after poking around in Firebug, I found an easy way to force a resize on the window:
infoWindow.b.contentSize = new google.maps.Size(w, h);
google.maps.event.trigger(infoWindow.b, 'contentsize_changed');
As far as what the real W/H should be set to on the first line, that's a matter of looking at infoWindow.b.contentNode and getting a real width/height either through the standard properties or jQuery's methods.
I'm not sure exactly what infoWindow.b is, but it seems like it's some sort of "content" object. I wish they would expose this and document it.
I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());