I would like to display name of the place next to the marker as shown in the below screen shot. Currently I don't need rest of the details appearing in Google Maps. All I care is that name of the hotel should appear along with the Marker.
Example: Courtyard Marriott Hotel - Google Maps link which clearly shows the name.
I have created demo jsFiddle (doesn't show the label)
var googleMap;
var hotelLocation = {
lat: 43.681592,
lng: -79.713612
};
var mapCenter = hotelLocation; //{ lat: 43.690497, lng: -79.966831 };
google.maps.event.addDomListener(window, 'resize', function() {
//https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
var center = googleMap.getCenter();
google.maps.event.trigger(googleMap, "resize");
googleMap.setCenter(center);
});
function InitializeGoogleMaps() {
//http://www.latlong.net/convert-address-to-lat-long.html
//90 Biscayne Crescent, Brampton, ON - Address of Hotel - { lat: 43.681592, lng: -79.713612 };
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter
});
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott'
});
}
InitializeGoogleMaps();
I have gone thru many search terms (as I am not sure what is the right word for this label and gone thru Maps Marker API too) but so far no luck. I think below thread seems to be on the same lines however I am hoping that there will be built in support inside Google maps rather then going for extra lib.
How to display a label next to a Marker for Google Maps?
It is more likely for comment, but excuse me (I can not comment yet ;))
Positioning can be done over margin, instead of counting by marker size.
It is tiny update of ndd jsFiddle in comment here https://stackoverflow.com/a/34145265/2686510
http://jsfiddle.net/6t3pyr94/
Someone could find it helpful to have css freedom of label position.
.map-marker-label {
position: absolute;
color: red;
font-size: 16px;
font-weight: bold;
/* Use margin to position the text */
/* top, left position is the place of marker position */
margin-top: -45px;
margin-left: 20px;
}
You can use pixelOffset:
pixelOffset: new google.maps.Size(100,140);
The result would be:
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott',
pixelOffset: new google.maps.Size(100,140);
});
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
Good afternoon,
I'm trying to implement a Google Maps inside my SobiPro entries (SobiPro is a directory component for Joomla) but it's not working properly. My map is showing some parts with a grey color and after searching and finding a lot of solutions, I need you to ask for help because any of the other solutions worked.
I have tried everything and it's still not working.
Here is the URL, in the third label you will find my map "Direccion" is called: http://bdebeauty.es/component/sobipro/268
What can I do to solve this problem?
Edit with more code:
<style>
#map-canvas {
margin: 0px;
padding: 0px;
}
</style>
<script>
function initialize2() {
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', initialize2);
</script>
<div id="map-canvas" style="width:450px;height:300px;"></div>
Thanks in advance.
I think what you will need is something like google.maps.event.trigger(map, 'resize');
as it is said in the documentation,
Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .
I want to add a custom HTML element (that can become transparent dynamically) instead of a marker.
Basically my html object would be a cirle (or rounded pin) with a picture of users in the middle.
I have imagined different solutions:
place a label (containing HTML) covering the marker which visibility would be set to none
work with overlays
hard way: replace the marker with a PNG image that I should compose dynamically with some sort of library superimposing two images (one geometric and the other user picture).
Anyway I can't figure out what to do and how to do it.
Thanks, Stefano
I realize that you've developed your own solution in the comments but for anyone looking for a simpler solution to this problem I would suggest looking into the Marker With Label library.
The library adds a DOM element along with each marker (designed to add a text label ect to each item, personally I've always used it for numbering), that could easily be utilized to allow for an image to be placed at each location. This could be used instead of the marker as Dr.Molle suggests, or in addition to. You are able to use the offset option to place the element in relation to the marker and so using z-index could overlay the image on top.
Here is a simple example of using an image as a label, taken from here:
<style type="text/css">
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 100px;
white-space: nowrap;
}
</style>
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var pictureLabel = document.createElement("img");
pictureLabel.src = "home.jpg";
var marker = new MarkerWithLabel({
position: homeLatLng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: pictureLabel,
labelAnchor: new google.maps.Point(50, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.50}
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
To position and overlay the image use the following options:
labelStyle: {top: "-30px", left: "-3px"},
labelZIndex: 2
Note that the positions are arbitrary and may require some tweaking. As an aside (and unrelated), I really like the idea of using an avatar in addition to the marker.
I'm having a heck of a time trying to get a basic Google Map to show up. I've been on Stack Overflow for hours and haven't had any success so far. The closest I've gotten is the map loads 1/4 of a square, the top left quarter. But then if you try to drag, zoom, etc it just turns grey like the rest of the map. On a few occasions, with the same code, the map will load fully but only after a long time (not sure exactly how long, but > 5 minutes).
In my template I have
<div id="map" style="width: 500px; height: 400px;"></div>
And then in my backbone view
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')
window.gMapsCallback = function(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Any ideas what might be happening? I am also open to any suggestions on a superior way to load a google map into a backbone view.
Ok, turns out there were a number of issues, including embedding a map in a Bootstrap tab, not including a callback, defining the div height and width, setting a small delay to load the map, and setting css attributes for the map. Oi. My final solution turned out to be:
In the template
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script>
<div id="map" style="width: 500px; height: 400px;"></div>
In the stylesheet
#map img {
max-width: none;
}
#map label {
width: auto; display:inline;
}
In the Backbone View
setTimeout(function(){
var myLatlng = new google.maps.LatLng(53.1, -2.44);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Create marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.1, -2.44),
title: 'The armpit of Cheshire'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 10000, // metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
google.maps.event.trigger(map, "resize");
map.setZoom( map.getZoom() );
}, 100);
Painful. Notice that when I call the gmaps script I had to include the callback even though I never use it. Without it, it didn't work fully. No clue why.
I'm new to google maps and want to use google map javascript API to display houses as markers. I want a person to be able to click on the map to place a marker, which can be clicked again to be removed or dragged to another location on the map. Then, I want the script to get the cordinates(lat and long) so that I can ad it to a database table. Any idea how I should do this? I'm using PHP in codeIgniter.
A good place to start would be to check out the reference manual: http://code.google.com/apis/maps/documentation/javascript/reference.html
If you look at map there you can see that it has an event called "click". What you do is after your map has been initialized you make an eventlistener, that listens to the click event. When that occurs you then place a marker on that location, and add an eventlistener on that marker for the click event if you want to remove it, or make it draggable if you want to drag it.
Remember to store your markers in an array if you ever want to use the information they are holding again.
I hope this helped.
I am late to the party. Please find below code snipet.
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var marker;
map.addListener('click', function(e) {
if(marker){
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
marker.setPosition(latlng);
}else{
marker = new google.maps.Marker({
position: {lat : e.latLng.lat(), lng : e.latLng.lng()},
map: map
})
}
alert("lat : "+e.latLng.lat()+ "; lng : "+e.latLng.lng())
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPpCPQOwkMotaDj0IgHQ7HDAE8cz6-4U&callback=initMap"
async defer></script>