Google Maps are quite new to me so any help would be appreciated.
I created a custom map width custom pins and shadows with an information window that pops up when the marker is clicked.
This was working fine up untill 2-3 days ago when the markers dissappeared, the shadow still shows in the correct place?
The map marker and shadow are in the same folder as the map so should both show, any help would be greatly recieved.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
function initialize() {
var latlng = new google.maps.LatLng(51.51921,-0.07828);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var westendImage = new google.maps.MarkerImage('images/WC1.png',
new google.maps.Size(50, 55),
new google.maps.Point(0,0),
new google.maps.Point(23, 75));
var westendShadow = new google.maps.MarkerImage('images/shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 48)
);
var westendPos = new google.maps.LatLng(51.52012, -0.13081);
var westend = new google.maps.Marker({
position: westendPos,
map: map,
icon: westendImage,
shadow: westendShadow,
title:"Westend Lettings Office",
zIndex: 2
});
google.maps.event.addListener(westend, 'click', function() {
infowindow1.open(map,westend);
});
Then show the map with:
<body onload="initialize()">
<div id="map_canvas" style="width:855px; height:390px;"></div>
</body>
Ok so I've answered my own question, google has updated the map api which of course has some bugs. So to fix my map icon problem I reverted to the previouse version 3.9.
Change the call to the api to this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.9"></script>
Bravo Me! :)
The updated maps can now be found here https://developers.google.com/maps/documentation/javascript/
Related
With the first script I create the map and add a marker to it with the second script (which does not work). I need to add the markers with a separate script because the marker data is retreived from my database. The query loops through records and provides the script with name and coordinates for markers. I know the problem is about the variable "map". If I move the marker script to within first script, it works. Can someone help me with this please?
<script type="text/javascript">
var map;
function GoogleLoadMap() {
var latLng = new google.maps.LatLng(35.337186, 33.337439);
var homeLatLng = new google.maps.LatLng(35.314246, 33.389347);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
</script>
<script type="text/javascript">
var marker<%=iii%> = new MarkerWithLabel({
position: new google.maps.LatLng(<%=lat%>, <%=lon%>),
draggable: true,
map: map,
labelContent: "<%=HNAME%>",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
var iw<%=iii%> = new google.maps.InfoWindow({
content: "<%=HNAME%>"
});
google.maps.event.addListener(marker<%=iii%>, "click", function (e) {
iw<%=iii%>.open(map, marker<%=iii%>); });
</script>
It is a timing problem. The map, which is initialized in the GoogleLoadMap() function (which I assume is run on the window load event, but you don't provide that code), is initialized after you create all your markers. You need to either initialize your markers after the map is initialized (inside the GoogleLoadMap function), or call the .setMap method on all the markers after initializing the map.
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>
I'm using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.
My Google Map only shows up fine the first time. Clicking the line a second time or more, the map does not re-draw properly and so is unusable.
I am using the following code:
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
google.maps.event.trigger(map, 'resize');
With google.maps.event.trigger(map, 'resize') at the end being my attempt to get the map to behave correctly.
You can see the effect at http://test2omniforce.co.uk/node/8 and clicking on the map image.
It doesn't look like a width and height are set on your div with id 'map_canvas' in map.php. I wonder if this is causing the map to not render correctly?
Maybe try adding some dimensions and see if that works.
Good luck!
May I know how to add numbering label to google map marker using google map api? Just add label, not trying to change the icon. Thank you.
If you don't want to use custom icons for each marker then I suggest looking into creating a label class with the OverlayView and then binding the position to the marker.
Or you could look at using something like: http://github.com/nmccready/google-maps-utility-library-v3-infobox
I think a better solution is to use a infoWindow. Something like this:
$(document).ready(function () {
var golfoMexico = new google.maps.LatLng(20.61536,-87.078975);
var settings = {
zoom: 18,
center: golfoMexico,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var pos1= new google.maps.LatLng(20.61536,-87.078975);
var infowindow = new google.maps.InfoWindow({
content: "Casa Stavola F8 II"
});
var companyMarker = new google.maps.Marker({ position: pos1, map: map,title:"Casa Stavola F8 II", visible:true});
infowindow.open(map,companyMarker);
});
Check out the example at http://www.geocodezip.com/basic8j.asp?filename=example_number.xml (for V2 of the API). There was also a question here about something similar - How can I create numbered map markers in Google Maps V3?.