We Keep Coding

How combine two Google Maps API - javascript

I use Google Maps API for two things on my website:
First for displaying map:
jQuery(document).ready(function($) {
function initialize_business() {
var map_move = $(document).width() > 850 ? true : false;
var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
var map_options = {
zoom: 14,
center: map_center,
zoomControl: false,
scaleControl: false,
draggable: false,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
new google.maps.Marker({
position: map_center,
map: map,
icon: js_string.template_directory + '/images/marker.png'
});
}
google.maps.event.addDomListener(window, 'resize', initialize_business);
google.maps.event.addDomListener(window, 'load', initialize_business);
});
and for this map I need next api link:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Secondly I use Google Map API for finding of GPS from my Address:
function google_geocoding() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
types: ['geocode'],
componentRestrictions: {country: 'cz'},
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert('Bohužel jsme nanašli žádnou lokaci');
return;
}
document.getElementById('address_lat').value = place.geometry.location.lat();
document.getElementById('address_lng').value = place.geometry.location.lng();
});
}
and for this event I need next api link:
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&region=cz&callback=google_geocoding"></script>
In console I see next bug:
You have included the Google Maps API multiple times on this page.
So I probably need to combine Google script links to one, but I don't know how.
Thanks for help

I find solution:
Call google maps API once
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&region=cz">
Insted of callback param I simple Call the function so final script is:
jQuery(document).ready(function($) {
if($('#business_sidebar_map').length > 0) {
function initialize_business() {
var map_move = $(document).width() > 850 ? true : false;
var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
var map_options = {
zoom: 14,
center: map_center,
zoomControl: false,
scaleControl: false,
draggable: false,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
new google.maps.Marker({
position: map_center,
map: map,
icon: js_string.template_directory + '/images/marker.png'
});
}
google.maps.event.addDomListener(window, 'resize', initialize_business);
google.maps.event.addDomListener(window, 'load', initialize_business);
}
if($('#address').length > 0) {
function google_geocoding() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
types: ['geocode'],
componentRestrictions: {country: 'cz'},
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert('Bohužel jsme nanašli žádnou lokaci');
return;
}
document.getElementById('address_lat').value = place.geometry.location.lat();
document.getElementById('address_lng').value = place.geometry.location.lng();
});
}
google_geocoding();
}
});

Related

I'm trying to show the title on hovering over the marker. I'm okay if it's open by default too.
I do not want infoWindow.
Here's what I have so far unsuccessfully.
function myMap() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myCenter = new google.maps.LatLng(34.131730, -117.910127);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 16,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
rotateControl: false
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: 'images/marker.png',
scaledSize : new google.maps.Size(60, 60),
};
var marker = new google.maps.Marker({
position:myCenter,
title: "Hello World!",
icon: image
});
marker.setMap(map);
}

function initialize() {
var myLatlng = new google.maps.LatLng(48.89364, 2.33739);
var mapOptions = { zoom: 13, 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); initialize();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
initialize();

I have a function to show a google map:
function initMapSA(lat, ln) {
var myLatLng = { lat: lat, lng: ln };
var opt = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map2 = new google.maps.Map(document.getElementById('map_canvas_agent'), opt);
var markerSa = new google.maps.Marker({
position: myLatLng,
map: map2,
title: 'Hello World!'
});
}
In #modal-body I add <div id="map_canvas_agent"></div>
I trigger it via a form button click event:
$(".sa-location").click(function () {
var id = $("#ServiceAgent").val(); //combobox value
$.get("#Url.Action("GetServiceAgentLocation")", { id: id }, function (data) {
initMapSA(data.Lat, data.Ln);//Initialize google maps
}, "json");
});
The Goole Map is showing but it is just a grey screen rather than an actual map. How do I fix that?

Force trigger a resize on the map:
google.maps.event.trigger(map, 'resize');

I am trying to get a Google Maps instance to show a bunch of markers, and then when you hover over a specific marker change it to a larger image. I would like it to revert back to the original marker image when the mouse leaves the new image area. I seem to have it working as I'd like in this JSfiddle:
https://jsfiddle.net/vn9po27c/2/
var locations_programs = [
['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],
['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],
['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],
['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']
];
var markersArray = [];
var markers = {};
var mapOptions = {
center: new google.maps.LatLng(45.4214, -75.6919),
zoom: 10,
scrollwheel: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
//*** PROGRAMS
var marker, i;
var id = 'programs';
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,zIndex:100
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
}
The only problem is I am using the same code on the beta website, and it's not working the same. On this website the change does not occur on mouseover / mouseout, but rather onclick.
http://www.christielakekids.com/newsite/
It is the map showing just under "Where we're making a difference".

try this seem functioning
<!DOCTYPE html>
<html>
<head>
<title>test sandbox 8</title>
<style type="text/css">
#main {
margin: 60px 15px;
}
#map {
min-height: 600px;
min-width: 800px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script>
// code to draw map
var map;
var col = '#FF0000';
var link ;
var latLng;
var polypoints;
function initialize() {
var locations_programs = [
['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],
['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],
['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],
['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']
];
var markersArray = [];
var markers = {};
var mapOptions = {
center: new google.maps.LatLng(45.4214, -75.6919),
zoom: 10,
scrollwheel: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//*** PROGRAMS
var marker, i;
var id = 'programs';
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,zIndex:100
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Using examples from Google's samples and other code found here on Stack Overflow, I've put together some JS that takes a street address and displays an overhead map as well as a Street View. For the most part these work wonderfully, but it breaks when the house is on a corner.
When the house is on a corner, it will sometimes show me the side of the house instead of the front of the house. If I go directly to Google Maps and search for that address, the Street View it shows is actually the front of the house, so I know there must be a way to determine the right view to use.
How do I get my code to show the front of the house like it does on Google's site?
function load_map_and_street_view_from_address(address) {
// Check if GPS has been locally cached.
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
}
});
}
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var addLatLng = new google.maps.LatLng(lat,lng);
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(addLatLng, 50, function(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
var panoOptions = {
position: addLatLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible:true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 14,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
var marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.DROP,
position: addLatLng
});
}
$(document).ready(function() {
console.log('ready');
load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});
https://jsfiddle.net/kennywyland/xm59cbac/

You are setting the pano to the wrong position. You want it in front of the house (snap to road, use the directions service), but point it at the result of the geocoder.
updated fiddle
function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(panoLatLng, 50, function (panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
document.getElementById('angle').innerHTML = angle;
var panoOptions = {
position: panoLatLng,
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible: true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 16,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
}
function load_map_and_street_view_from_address(address) {
// Check if GPS has been locally cached.
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
// create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
var request = {
origin: address,
destination: address,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var cameraLatLng = response.routes[0].legs[0].steps[0].start_location;
create_map_and_streetview(gps, cameraLatLng, 'map_canvas', 'pano');
}
});
}
});
}
function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {
var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(panoLatLng, 50, function(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var marker = new google.maps.Marker({
map: map,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
position: panoData.location.latLng
});
var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
document.getElementById('angle').innerHTML = angle;
var panoOptions = {
position: panoLatLng,
pov: {
heading: angle,
pitch: 0,
zoom: 1
},
enableCloseButton: false,
visible: true
};
panorama.setOptions(panoOptions);
});
var myOptions = {
zoom: 16,
center: addLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
};
var map = new google.maps.Map(document.getElementById(map_id), myOptions);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
position: addLatLng
});
}
$(document).ready(function() {
console.log('ready');
load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});
<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?ext=.js"></script>
<div id="angle"></div>
<div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>

I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Get rid of
map.setCenter(latlng);