Google Map API JS - interference between two on one page? - javascript

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();
}
})

Related

How to add search box to Google map on website?

I have added maps to my website but can't seem to add a search box with the map to search locations. I have given the code below that I used for adding maps. Can someone help with adding search box to the code?
<div id="googleMap" style="width:100%;height:400px;"></div>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(12.9716, 77.5946),
zoom:10,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap"></script>
You can use Autocomplete in your code. It will provide a list of suggestion to complete the user's input. Once you choose the place from the list, you can then get the place property to present it on the map and put a marker on it.
Here is a simplified code where I incorporated your code to the Google Maps Platform Autocomplete code sample.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#googleMap {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#pac-container {
padding: 5px;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
font-family: Roboto;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 15px;
font-weight: 500;
padding-left: 5px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
font-family: Roboto;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
</style>
</head>
<body>
<div class="pac-card" id="pac-card">
<div id="title">
Search Address
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location">
</div>
</div>
<div id="googleMap"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(12.9716, 77.5946),
zoom: 10,
};
var map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var marker = new google.maps.Marker({
map: map
});
//Use Places Autocomplete
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(10);
}
//Put markers on the place
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
</script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myMap" async defer></script>
</body>
</html>
You can also view this simplified code here.
You can use something like this:
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));

Google Maps Place ID Finder - Can not highlight (copy) information on InfoWindow

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;
}

ng-include not working for html with javascript in it

This is my HTML Code along with the javascript
<!DOCTYPE html>
<html>
<head lang="en">
<style>
#map-canvas {
height:400px;
width:600px;
}
.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);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px;
/* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript">
var map;
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 = /** #type {HTMLInputElement} */
(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */ (input));
// 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);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'click', function(event) {
var myLatLng = event.latLng;
var lat = myLatLng.lat();
var lng = myLatLng.lng();
var x = 'Latitude is =' + lat + 'Longitude is=' + lng;
var TheTextBox = document.getElementById("lat");
TheTextBox.value = lat;
var TheTextBox1 = document.getElementById("long");
TheTextBox1.value = lng;
// alert(x);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<input type="text" name="lat" id="lat">
<input type="text" name="long" id="long">
</body>
</html>
I have a angular app in place which calls various views on click event and it is handled by $locationprovider and $routeprovider from one single js file for controllers and all.
Now the problem is when I am trying to use the ng-include feature in one of the views it isn't working properly. The textboxes are visible but the map isn't. I even tried using the onload thing to initialize the function again which is in my original HTML page but still it doesn't work.
The error on the console is - ReferenceError: google is not defined
Which happens when the javascript part is not able to use google maps script.
Check this for info on the error : Reference Error - StackOverflow Question
ng-include code
<ng-include
src="'testmap.html'"
[onload="initialize();"]
>
</ng-include>
Please let me know what I must do to rectify this.
Thanks for your time. Please let me know if you need more clarifications from my side.
ng-include is NOT an iframe replacement. It is meant to add templates inside other templates for angular that may include calls to actual angular code.
You are attempting to include an entire html page, head tag and all into another page, which is not only invalid html, but also pointless unless you do it inside an iframe element.
I would suggest you refactor your code into a google maps angular directive.

C# webbrowser control - google map javascript problems

I have a windows form that contains a webbrowser control. This web browser displays a google map defined in javascript. This script also contains other methods that for some reason stopped working on the webbrowser control two days ago. One particular methd is drawing a red circle on the map on a click event. The mouse drag to move across the map also does not function. When the script is run on Internet Explorer or Chrome, it works fine. N.B. Most of the code is from examples from the Google Maps API website.
I call the script using:
webBrowser1.ScriptErrorsSuppressed = true;
webBrowser1.DocumentText = Properties.Resources.sample;
Following is the script:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.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);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 200px;
height:20px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #000;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
var globalLatLng = '';
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(24.926204,48.052185),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
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 = markers[i]; i++) {
marker.setMap(null);
}
// For each place, 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)
};
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.addListener(map, 'click', function(e) {
var lat = e.latLng.lat();
var lng = e.latLng.lng();
globalLatLng = globalLatLng + ',' + lat + ',' + lng;
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(position.lat(), position.lng()), //new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
radius:15000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
showMessage();
}
function test() {//this function returns lats and longs as a string with separators
return(globalLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
Many posts said that the problem might be the webbrowser control default IE version but its not. My webbrowser version is 11.
To recap: few days ago the script worked perfectly with the webbrowser control. Now it doesn't. I didn't perform any updates since then. It works well with chrome and IE.
Any help?
I have solved the problem by adding the following meta tag in a header section.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This solution can be found at:
https://social.msdn.microsoft.com/Forums/vstudio/en-US/6996b0c5-b44d-4040-9dbe-6206b1d9185e/webbrowser-script-error-when-using-google-maps?forum=wpf

Draggable Icons on a Google Map V3 - Set to Draggable=True, but can not drag it

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

Categories