I do not know what is wrong with my code for displaying a map marker for my address. I have looked on the google development site as well as blogs and stack overflow posts but seem to not be able to understand it or for some reason can not effectively implement it into my code. I want a marker to display for an address on a map, that when clicked will take them to a URL for google maps of that location.
My CSS:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
My HTML:
<div style="height: 277px; width: 964px; z-index; 1;">
<div id="map-canvas" style="margin: 0; padding: 0; height: 100%;"></div>
</div>
try this:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
EDIT:
How do I link the marker to a URL?
var infowindow = new google.maps.InfoWindow({
content: "<a href='http://www.google.com'>Visit Google!</a> "
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
Related
I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.
Here is my code: What am I doing wrong?
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.
Is this why the marker is not been displayed?
Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case
Move your marker creation to the initialize function.
$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
console.log('map loaded');
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
makePin(42.745334, 12.738430);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
console.log('document loaded');
})
function makePin(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: 'This is the title'
});
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>
How can you make marker without loaded map. Map need to initialize first then marker will work
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
Here is the solution:
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Sorry if this is a real rookie question but I can never get my head around Google Maps API.
Below is my JS code for my google map. I just want to simply add another marker and make the title pop up when you click on the marker. Can someone show me how this is done?
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
});
}
}
initGoogleMaps();
add an infowindow
infowindow = new google.maps.InfoWindow(),
add a "click" listener to the marker to open it:
google.maps.event.addListener(marker,'click',function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map,marker);
});
add a second marker and click listener for it:
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker2,'click',function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map,marker2);
});
proof of concept fiddle
code snippet:
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
myLatlng2 = new google.maps.LatLng(50.37, -4.2)
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
infowindow = new google.maps.InfoWindow(),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
}),
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map, marker);
});
google.maps.event.addListener(marker2, 'click', function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map, marker2);
});
}
}
initGoogleMaps();
html,
body,
#contact-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="contact-map" style="border: 2px solid #3872ac;"></div>
try this:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = 'html string';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
I am working on google maps api on web
This is my code
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);
Just the map is shown but the marker is not, why please?
I have a second question please. What is the best action the user expect to click (or do) what they want to add a marker on the map?
Thanks
Maybe you used the ID wrong.
JS:
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);
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3523/
I have looked every where and am starting to go crazy. I know I am close, but can't get it.
I have my html:
<div id="glasgow-map" class="collapse">
<div class="map">
<div id="map-canvas" style="width:100%; height:350px;"></div>
</div>
</div><!--end collapse-->
my JS is:
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#glasgow-map').on('shown.bs.collapse', function () {
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
From all the other info I have seen I know I need the (map, "resize) but I am getting this error in the console:
Uncaught ReferenceError: map is not defined
Any help would be fantastic. It's been a long day!!
Thanks for your Help #kamlesh, I think you are right, but this is the way I finally managed to get it to work, and also for multiple maps - if anyone needs help with that, it's below.
I stripped the google.maps.event.addDomListener(window, 'load', initialize); and added the initialize to the .collapse button for when it is clicked. This way there is no need for the resize.
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
zoom: 16,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
zoom: 16,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
title: 'Taylor Hopkinson Associates'
});
}
$('#glasgow-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#london-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#bromley-map').on('shown.bs.collapse', function (e) {
initialize();
})
Perhaps there is a way of streamlining this code, but it certainly works for me.
I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp