I wanted to add a map to my website. I found this easy tutorial below.
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
It worked perfectly until I realised the location I had specified in the coordinates merely centres the map, there is no actual cursor.
I googled a bit but none of the suggestions seemed to work for me. I'm hoping I just need to alter the html etc slightly.
I'm sure somebody must have done this successfully as it seems such a simple thing and the part I've already done was so easy.
Thanks.
Edit: Have fixed the link url.
Edit2: Ok here is my code at the moment:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(50.837004,-0.13244),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.837004,-0.13244),
map: myMap,
title: "BLAHBLAH PLACE"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
and in the body section I have:
<div id="map_canvas"></div>
Thanks. :S
If I understand correctly, you are interesting in adding a marker (or pin) on the map? You can add a marker to a map like so:
var myMap = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(44.5403, -78.5463),
map: myMap,
title: "My pin title"
});
See here for more info on adding markers.
Related
I display a google map on a web page, based on latitude and longitude. All works fine. But if I change my browser language to any language (e.g. French, German) from the default English, then the map goes blank (google map box displayed, but no map).
I tried adding language=en to the script link; makes no difference. Anyone who can shed some light?
Code is shown below:-
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng("50.00123", "0.012311");
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Event Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing
I am adding a google map to my site, and i've added exactly the same code as from the google maps api documentation but my map appears as a static map without marker (with the correct center point which is a good start) instead of a dynamic draggable map with marker and controllers.
Any ideas what I'm doing wrong? Code is below although I'm fairly sure the code is fine since it's straight from the google maps api site.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm using Google Maps version 3 and would like to add two markers for a single location on the map.
One would be the default marker which appears with Google Maps, but second would show the name of the brand associated with that location.
My code is
function initialize() {
var filterLatlng = new google.maps.LatLng(18.928184,72.832601);
var mapOptions = {
center: filterLatlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: filterLatlng,
title:"Filter Shop"
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker.setMap(map);
}
You probably want this library:
http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303
It will allow you to add a label on the map.
That label will be attached to a hidden marker like you described.
The use is quite simple you should be able to figure it out quite easy.
I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
This code might help you to get an idea about placing custom markers.