I'm building a map with google maps and I have a problem. I'm trying to style the infowindow which is opened when some user will click on the pin. My problem is that it actually works but it is rendered with a strange effect on a father div of the window itself (when someone click multiple times on my window, the window display a weird white border, which is the color of the background of the father of my div with a class of gm-style-iw).
My code is the following:
MY JAVASCRIPT:
function initMap() {
var styledMapType=new google.maps.StyledMapType([{my custom style}]);
var mycompany = {lat: 44.348534, lng: -79.669197};
var map = new google.maps.Map(document.getElementById('map'), {
center: mycompany,
zoom: 14,
scrollwheel: false,
mapTypeControl: false
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var contentString = '<div class="iw-content">' + '<div class="iw-subTitle">My company </div>' + '<p>455 street</p>' + '<p>City, World</p>' + '<p>Canada, Postalcode</p>' + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mycompany,
map: map,
title: 'My company'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(infowindow, 'domready', function() {
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({'background' : '#252525'});
var iwmain = iwBackground.children(':nth-child(2)');
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
var iwCloseBtn = iwOuter.next();
});
}
initMap();
MY CSS:
#map .gm-style-iw {
background-color: #252525;
padding: 2% 11%;
}
#map .iw-content p {
color: #a5a5a5;
}
#map .iw-subTitle {
color: white;
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}
Plus I want to style the weird triangle at the bottom of the map which is also white because of the native color of the background.
I'm gonna add a picture to explain as better my problem
Thank you in advance for any help
You need to use the following CSS attributes to correctly style the information window:
/*style the box which holds the text of the information window*/
.gm-style .gm-style-iw {
background-color: #252525 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 120px !important;
padding-top: 10px;
display: block !important;
}
/*style the paragraph tag*/
.gm-style .gm-style-iw #google-popup p{
padding: 10px;
}
/*style the annoying little arrow at the bottom*/
.gm-style div div div div div div div div {
background-color: #252525 !important;
margin: 0;
padding: 0;
top: 0;
color: #fff;
font-size: 16px;
}
/*style the link*/
.gm-style div div div div div div div div a {
color: #f1f1f1;
font-weight: bold;
}
JSfiddle Example: http://jsfiddle.net/hLenqzmy/18/
I strongly recommend using Snazzy Info Window here. The accepted answer recommends a very hacky and undocumented approach, which might break as soon as Google updates their structure.
With Snazzy Info Window you can simply specify your attributes and then customize the styling even with SCSS:
let map = new google.maps.Map(document.getElementById('map-canvas'));
let latLng = new google.maps.LatLng(1, 1);
let marker = new google.maps.Marker({
position: latLng,
map: map
});
let headline = 'Amazing Location';
let content = 'Put your great great content here';
let info = new SnazzyInfoWindow({
marker: marker,
content: `<h1>${headline}</h1><span class="info-content">${content}</span>`,
closeOnMapClick: false,
pointer: false,
shadow: false,
});
And then add in your SCSS:
$si-content-bg: #000;
See https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss for more styling options and here for the full example.
It's 2018 people, no need to beat yourself up by overwriting 10 times nested divs.
Related
I'm using the Google Place ID as a way to link locations and other content in my database. So Basically I've created an admin page that allows me to set up a way to easily enter new locations and it's content.
On my admin page I've added a map using Place ID finder from Google so I can search for a place and in the InfoWindow highlight to copy the Place ID information, and then paste this information. For some reason the infowindow does not allow the highlight.
I thought it might be because the additional code from my admin page but when I viewed the demo on Google developer documentation the demo also does not allow highlighting. If on the demo or my admin page I can click on another place on the map, a new InfoWindow pops up and that information is highlightable.
Can someone help using the code from documentation on Google Site (below), recode to allow the searched information window to be highlightable?
<style>
/* 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;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Link to the example in the documentation (which demonstrates the issue): Place ID Finder - Google Maps Javascript API
The infowindow-content has the CSS user-select: none; set (so the user can't select the text). You can override that with:
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important; /* for safari per Avrahm Kleinholz */
}
proof of concept fiddle
related issue in the issue tracker: Issue 11331: text inside InfoWindow cannot be selected
code snippet:
// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
/* 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;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
user-select: text !important
}
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span>
<br>Place ID <span id="place-id"></span>
<br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
To answer my own question with the help of geocodezip, I Googled user-select and found that for Safari they require -webkit-user-select: text; as user-select doesn't work with the Apple browser. So my code reads and it works perfectly!
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important;
}
I'm trying to understand how can I display markers/popups on osm map with openlayers3, I have found examples in examples on ol3 web page, but...
Is there more examples for coding markers/popups with javascript or jquery, preferably something like this or similar examples.
The idea is to mark a building, by clicking on the marker it will popup some info for the building, further more I would like to connect important places from the city to this building (library, restaurants, bus stops, etc). I wish if someone can explain me how to start up building this, and I don't want to use bootstrap3 for this ( I have seen overlay example), instead want pure html5, css3, javascript/jquery)
You can create a popup with pure HTML, CSS and JavaScript, as shown in the popup example. A fully working example for what you want is here: http://jsfiddle.net/ahocevar/z86zc9fz/1/.
The HTML for the popup is simple:
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
The CSS is a bit more involved:
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 80px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
To make a popup, use ol.Overlay:
var container = document.getElementById('popup');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
To make features clickable, use
var content = document.getElementById('popup-content');
map.on('singleclick', function(evt) {
var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature.get('name');
});
var coordinate = evt.coordinate;
content.innerHTML = name;
overlay.setPosition(coordinate);
});
For visual feedback when the pointer is over a feature, use
map.on('pointermove', function(evt) {
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});
The features (i.e. markers) come from a vector layer:
var markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
name: 'Vienna',
type: 'City'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
name: 'London',
type: 'City'
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
})
});
map.addLayer(markers);
The above snippet uses a fixed style, i.e. the same icon for all types of features. If you have different types of features, you can define a style function instead of a fixed style:
var cityStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
});
var otherStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/Butterfly.png'
})
});
var markers = new ol.layer.Vector({
// ...
style: function(feature, resolution) {
if (feature.get('type') == 'City' {
return cityStyle;
}
return otherStyle;
}
});
I have a page with several different views. At the top there is a small gogole map for searching. One of the views has a results map.
Site done in MVC 5 bootstrap 4.
Both were working together but as you do was adding/changing things. Now they don't play well together.
When the results map is shown - the smaller search map does not display the roadmap. Map seems to have initialised ok - but doesn't show the roads/map. If I change to Satellite - it seems to show within part of the map/frame only. I've also noticed that the MapType control has changed from a bar to a drop-down, which is the default for smaller screens.
As far as I can see - bot maps use separate variables.
Won't post the code here initially as there's a fair bit - and I thought I'd make a preliminary query in case someone has experienced such behaviour before.
If I disable the results map the search map works again.
Correct search map, when shown on a page/view without second map :
On page/view where the second map is displayed. Note change of map type control:
If I change to display Satellite rather than road - a portion displays. This is drageable to a certain extent but portion will then change:
Any ideas ?
Could bootstrap be sending incorrect screen size signals ?
Can post the code if think it will help.
To clarify:
MVC = ASP.Net MVC
Bootstrap = http://getbootstrap.com v 3.3.4
Search Map definition.
Note HTML and JS contains some ASP.Net MVC Razor code prefixed with "#"
Also the map is only initialised when the Bootstrap panel is opened not on window load.
< script >
var markersSearch = [];
var mapSearch;
function ClearSearch() {
//clear values + submmit form empty
var form = document.getElementById("searchform");
document.getElementById("Search").value = "";
document.getElementById("eventtypeID").selectedIndex = 0;
document.getElementById("EventFrom").value = "";
document.getElementById("EventTo").value = "";
document.getElementById("Free").checked = false;
document.getElementById("hidLat").value = "";
document.getElementById("hidLng").value = "";
document.getElementById("distance").selectedIndex = 1;
ClearLocations();
form.submit();
}
function showsearch() {
//show serch panel
//only initialise map if not already done
if (typeof mapSearch == 'undefined') {
initializeSearch();
}
}
function SetMyLocation() {
//clear existing markers
ClearLocations();
//set to current pos
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
mapSearch.setCenter(initialLocation);
// Create a marker for each place.
var marker = new google.maps.Marker({
map: mapSearch,
//icon: image,
title: 'My Location',
position: initialLocation,
draggable: true
});
//display
markersSearch.push(marker);
//zoom
mapSearch.setZoom(16);
//listener
google.maps.event.addListener(marker, 'drag', function(event) {
SetHtmlLocation(event.latLng.lat(), event.latLng.lng());
});
google.maps.event.addListener(marker, 'dragend', function(event) {
SeHtmltLocation(event.latLng.lat(), event.latLng.lng());
});
SetHtmlLocation(position.coords.latitude, position.coords.longitude);
});
}
}
function SetLocation(lat, lng) {
ClearLocations();
var setLocation = new google.maps.LatLng(lat, lng);
// Create a marker for each place.
var markerSetLoc = new google.maps.Marker({
map: mapSearch,
//icon: image,
title: 'My Location',
position: setLocation,
draggable: true
});
mapSearch.setCenter(setLocation);
//zoom
mapSearch.setZoom(16);
//listener
google.maps.event.addListener(markerSetLoc, 'drag', function(event) {
SetHtmlLocation(event.latLng.lat(), event.latLng.lng());
});
google.maps.event.addListener(markerSetLoc, 'dragend', function(event) {
SetHtmlLocation(event.latLng.lat(), event.latLng.lng());
});
//addd to array
markersSearch.push(markerSetLoc);
SetHtmlLocation(lat, lng);
} //SetLocation
function SetHtmlLocation(lat, lng) {
document.getElementById("hidLat").value = lat;
document.getElementById("hidLng").value = lng;
}
function ClearLocationsIncInput() {
document.getElementById("pac-input").value = '';
ClearLocations();
}
function ClearLocations() {
for (var i = 0; i < markersSearch.length; i++) {
google.maps.event.clearInstanceListeners(markersSearch[i]);
markersSearch[i].setMap(null);
}
markersSearch = [];
SetHtmlLocation(null, null);
}
function initializeSearch() {
//initialise starting point if form re-submited
#
if (!string.IsNullOrEmpty(ViewBag.currentLat)) {#: var londonLatLong = new google.maps.LatLng(#ViewBag.currentLat, #ViewBag.currentLng);#: var zoom = 16;
//SetHtmlLocation done in control itself
} else {#: var londonLatLong = new google.maps.LatLng(51.507, -0.1277);#: var zoom = 13;
}
var mapOptionsSearch = {
center: londonLatLong,
zoom: zoom,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapSearch = new google.maps.Map(document.getElementById('event-map-search'), mapOptionsSearch);
//IF ORIGINALLY PLACED - set marker on postback
#
if (!string.IsNullOrEmpty(ViewBag.currentLat)) {
#: SetLocation(#ViewBag.currentLat, #ViewBag.currentLng);
}
// Create the search box and link it to the UI element.
var input = /** ##type {HTMLInputElement} */ (
document.getElementById('pac-input'));
var inputgroup = (document.getElementById('pac-input-group'));
//mapSearch.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
mapSearch.controls[google.maps.ControlPosition.TOP_LEFT].push(inputgroup);
var searchBox = new google.maps.places.SearchBox( /** ##type {HTMLInputElement} */ (input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markersSearch[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
ClearLocations();
//use places[0]
SetLocation(places[0].geometry.location.lat(), places[0].geometry.location.lng());
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(mapSearch, 'bounds_changed', function() {
var boundsBias = mapSearch.getBounds();
searchBox.setBounds(boundsBias);
});
//google.maps.event.addDomListener(window, 'load', initialize);
} //initialize
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
< /script>
<style type="text/css"> #event-map-search {
height: 100%;
width: 100%;
min-width: 200px;
min-height: 200px;
margin: 0;
padding: 0;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/*Auto complete ?*/
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
/*font-family: Roboto;*/
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
/*font-family: Roboto;*/
/*font-size: 10px;*/
font-weight: 300;
width: 280px;
/*padding: 0 11px 0 13px;*/
text-overflow: ellipsis;
}
#pac-input-group {
width: 300px;
margin-top: 6px;
margin-left: 6px;
}
#pac-input:focus {
border-color: #4d90fe;
}
/*TODO - move to CSS*/
</style>
<div id="pac-input-group" class="input-group">
<input id="pac-input" class="form-control input-sm" type="text" placeholder="Choose a location">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button" data-toggle="tooltip" data-placement="bottom" title="Set to my location" onclick="javascript: SetMyLocation();">
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
</button>
<button class="btn btn-default btn-sm" type="button" data-toggle="tooltip" data-placement="bottom" title="Clear Location" onclick="javascript: ClearLocationsIncInput();">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
</div>
<div id="event-map-search"></div>
#Html.Hidden("hidLat", (object)ViewBag.currentLat) #Html.Hidden("hidLng", (object)ViewBag.currentLng)
Code for the Display map, in one view which is included as a Razor/MVC:
Html.RenderPartial("EventsMap", Model);
< script type = "text/javascript" >
var markersDisplay = [];
var mapDisplay;
var boundsDisplay = new google.maps.LatLngBounds();
function initializeDisplayMap() {
#
if (Model.Count > 0) {#: var firstPointDisplay = new google.maps.LatLng(#Model.FirstOrDefault().address_latitude, #Model.FirstOrDefault().address_longitude);
} else {#: var firstPointDisplay = new google.maps.LatLng(51.507, -0.1277);
}
var mapOptionsDisplay = {
zoom: 13,
center: firstPointDisplay,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
mapDisplay = new google.maps.Map(document.getElementById('event-map-display'), mapOptionsDisplay);
//draw marker code from C#
#
foreach(var item in Model) {#: addMarkerDisplay(#item.address_latitude, #item.address_longitude, '#Html.EncodeJsString(item.event_title)', #item.event_ID);
}
//collect all in bounds
for (i = 0; i < markersDisplay.length; i++) {
boundsDisplay.extend(markersDisplay[i].getPosition());
}
//bounds map
mapDisplay.fitBounds(boundsDisplay);
}
function addMarkerDisplay(x, y, ptitle, eID) {
var location = new google.maps.LatLng(x, y);
var newmarkerDisplay = new google.maps.Marker({
position: location,
title: ptitle,
map: mapDisplay,
draggable: false,
id: eID
});
markersDisplay.push(newmarkerDisplay);
google.maps.event.addListener(newmarkerDisplay, 'click', function() {
highlightevent(this.id);
});
}
google.maps.event.addDomListener(window, 'load', initializeDisplayMap);
function highlightevent(id) {
$('#eventMapTable tr').each(function() {
//alert($(this).data('id'));
$(this).removeClass("eventMapRowHighlight");
if ($(this).data('id') == id) {
$(this).addClass("eventMapRowHighlight");
}
});
}
< /script>
/*---------------Events--------------------------*/
#event-map-display {
height: 100%;
width: 100%;
min-width: 300px;
min-height: 500px;
margin: 0;
padding: 0;
}
.eventTable tbody tr:hover td {
background-color: black;
color: white;
}
.eventTable tbody tr {
cursor: pointer;
}
#EventListImageContainer {
padding-top: 5px;
height: 100%;
}
#EventMapContainer {
padding-top: 5px;
height: 100%;
}
#EventListImageContainer img {
display: block;
margin-left: auto;
margin-right: auto;
}
.eventMapRowHighlight {
background-color: #highlightcol1;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
<div id="EventMapContainer" class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<div id="event-map-display"></div>
</div>
Fixed it. :)
Was calling the faulty map initialise routine from a onclick of the button that opened the Boostrap panel where it was located.
This had been working and still did when the page did not contain another map.
Thought I'd check for events fired after the boostrap panel had finished opening as it seemed to be a peculiarity to do with sizing.
So instead of firing on the button onclick I implemented the bootstrap event "shown.bs.collapse" : This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
Thus:
$('#searchpanel').on('shown.bs.collapse', function () {
if (typeof mapSearch == 'undefined') {
initializeSearch();
}
})
I have everything working on this Google map V3 on how I would like it except for one last thing. Right now, If you load up the map, the map is able to search for a place and drag an icon from outside the map into the Google map. However, once the icon is inside the map, I am not able to drag it. I've search endlessly on where I went wrong on my code.
Below are a few examples of many that I read on:
Link1,
Link2, Link3, Link4 (Link 4 is what i need but could not connect the code after further inspection)
I feel I am very close but I believe I am just not declaring the right variables or not connecting them right. Below is the code and here is a FIddle that can give you a picture of my problem. (Try dragging the icon once and then dragging it again inside the map)
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 97%;
}
#map-canvas {
width: 70%;
height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -30%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#shelf {
position: absolute;
margin-right: 5px;
top: 25px;
left: 70%;
height: 98%;
width: 30%;
float: right;
}
#draggable {z-index:1000000000;}
#draggable2 {z-index:1000000000;}
#draggable3 {z-index:1000000000;}
.ecostation {
margin-left: auto;
margin-right: auto;
border: 1.0px solid #F0F0F0;
border-radius: 5.0px 5.0px 5.0px 5.0px;
width: 85%;
text-align: center;
}
#wrapper {
display: table-row;
border: 1.0px solid rgb(204,204,204);
border-radius: 5.0px 5.0px 5.0px 5.0px;
}
#wrapper div {
display: table-cell;
border-radius: 10.0px 10.0px 10.0px 10.0px;
width: 12.5%;
}
#wrapper div img {
display: block;
padding: 5.0px;
margin: 5.0px auto;
text-align: center;
}
#wrapper div h5, #wrapper div p {
text-align: center;
font-size: 11px;
margin-top: -10px;
font-weight: 800;
}
.title {
margin-left: 7%;
color: #F0F0F0;
font-weight: 600;
}
#target {
width: 345px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script>
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each plce, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id='shelf'>
<div class="ecostation">
<div id="wrapper">
<div>
<img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
<p>Trash/Compost</p>
</div>
<div>
<img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
<p>Trash</p>
</div>
<div>
<img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
<p>Recycle</p>
</div>
</div>
</div>
</div>
</html>
end of code
If you guys can let me know that would be great! Also, i noticed that marker is declared twice. Is that one of the problems? I tried declaring something else but had no luck.
I also came accross this code but not sure if it is helpful in this situation
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
Possibly thinking it has to do something with this piece of code below?
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
But then again, couldn't figure what was wrong with, am I connecting the variables correctly?
Help would be greatly appreciated, I am very close to finishing what I want to accomplish on this map
Check to make sure you are not using svg images for the icon. They seem to work on FireFox and Chrome, but not IE
i use this function for generate my gmap when the user click on button
function getGMap(id_map,lat,lng) {
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id_map),
mapOptions);
marker = new google.maps.Marker({
map:map,
//animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
icon: "../imgmdg/icons/map_pin.png"
});
}
$(".toggleMap").click(function(){
var id_map=$(this).attr('data-idmap');
var lat=$(this).attr('data-lat');
var lng=$(this).attr('data-lng');
var status=$(this).attr('data-status');
if(status=="0") {
console.log(id_map);
console.log(lat);
console.log(lng);
$("#"+id_map).html('');
getGMap(id_map,lat,lng);
$(this).attr('data-status','1');
}
});
trigger: (class toggleMap in the second 'li')
<ul class="nav nav-tabs tabsFixBorder">
<li class="active">Menù</li>
<li>Profilo</li>
</ul>
and in my page there are some div like this:
<div id="map_1" class="gmap_container"></div>
<div id="map_2" class="gmap_container"></div>
<div id="map_3" class="gmap_container"></div>
this is my css:
html{
font-family: Arial, Helvetica, Verdana;
font-size: 12px;
color: #2d2929;
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-image: url('../imgmdg/pattern/pattern.jpg');
}
.gmap_container{
display: block;
/*tried with height:100% as well*/
height:200px;
width:100%;
background-color: #fff !important;
margin: 0px;
padding-bottom:10px;
}
it work only for the first click I do
after one click the map have some problem
(it load only a part of the map)
this is the screenshot of the problem: http://postimg.org/image/7apl01wn7/
thanks all in advice
Finally i have found the solution for my problem:
at the end i've used the bootstrap tab as a container for my map.
the trick is load the map after the tab is loaded (for example i used the bootstrap event 'shown')
$('a[data-toggle="tab"]').on('shown', function (e) {
getGMap(id_map,lat,lng);
});
hope this help