Wrong country code returned by Google Geocoder - google-maps-api-3

I'm getting incorrect country codes when using Google Places API to geocode point locations. This happens mainly near country borders so I suppose that Places API is using a different source for country borders (with less precision) than the one shown in the Google Map tiles.
In the example below, the point is clearly inside France but the returned ISO code by Google Places is "ES" for "Spain".
function initMap() {
var geocoder = new google.maps.Geocoder;
var point = new google.maps.LatLng(42.4241355,2.2915667);
var map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: point });
var country_name = "Undefined";
geocoder.geocode({'location': point}, function(results, status, country_name) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
for (var i=0; i < results[0].address_components.length; i++) {
for (var j=0; j < results[0].address_components[i].types.length; j++) {
if (results[0].address_components[i].types[j] == "country") {
country = results[0].address_components[i];
}
}
}
country_name = country.short_name;
} else {
country_name = "Geocoder no results found";
}
} else {
country_name = 'Geocoder failed due to: ' + status;
}
var marker = new google.maps.Marker({ position: point, map: map });
var infowindow = new google.maps.InfoWindow({ content: country_name });
infowindow.open(map, marker);
});
}
#map { height: 400px; width: 100%; }
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyABsURr0TnnANUUgsqN_Rk2VXhqgZfZrEk&callback=initMap"> </script>

The location of the reverse geocoded result that you are using is on the other side of the border.
(BTW - this is the Google Reverse Geocoder, not the Google Places API)
proof of concept fiddle
blue marker in image below is location of reverse geocoded result
code snippet:
function initMap() {
var geocoder = new google.maps.Geocoder;
var point = new google.maps.LatLng(42.4241355, 2.2915667);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: point
});
var country_name = "Undefined";
var bounds = new google.maps.LatLngBounds();
bounds.extend(point);
geocoder.geocode({
'location': point
}, function(results, status, country_name) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
for (var i = 0; i < results[0].address_components.length; i++) {
for (var j = 0; j < results[0].address_components[i].types.length; j++) {
if (results[0].address_components[i].types[j] == "country") {
country = results[0].address_components[i];
console.log("country=" + country.short_name + ":" + country.long_name + " i=" + i + " j=" + j);
console.log("results=" + JSON.stringify(results));
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
}
}
}
country_name = country.short_name;
} else {
country_name = "Geocoder no results found";
}
} else {
country_name = 'Geocoder failed due to: ' + status;
}
var marker = new google.maps.Marker({
position: point,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: country_name
});
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initMap);
#map {
height: 400px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Related

Google Maps is showing blank using API 3 and autosuggestion is not working

I'm trying to provide a direction service using WordPress.
And the API using here is APi but the map is only displaying blank and also when address is entered, it didn't return any result.
I bought a plugin from CodeCanyon but it's no longer supported.
This is the call I made:
wp_enqueue_style('jqmap-style-ui-slide', WP_PLUGIN_URL . '/JQMap_RouteCalc/css/jquery-ui-1.8.17.custom.css');
wp_register_script('jquery-JQMap_RouteCalcgoogleapis', 'https://maps.googleapis.com/maps/api/js?key=MY-KEY-HERE-kQ&libraries=places');
wp_enqueue_script('jquery-JQMap_RouteCalc',WP_PLUGIN_URL . '/JQMap_RouteCalc/js/jquery-JQMap_RouteCalc.js', array('jquery','jquery-ui-slider','jquery-JQMap_RouteCalcgoogleapis'));
And this is the JavaScript below
(function($){
//////////////////////// FUNCTION TO GIVE AUTOCOMPLETE TO EACH CALC INPUTS //////////////
function autocomplete_map(container){
container.find("input").each(function(){
new google.maps.places.Autocomplete($(this)[0]);
$(this).attr('placeholder','')
});
}
////////////////////////// FUNCTION TO PRIN ROUTE INFO ///////////
function print_route(panel){
var a = window.open('','','width=300,height=300');
a.document.open("text/html");
a.document.write(panel.html());
a.document.close();
a.print();
}
////////////////////////// START GOOGLE MAP API /////////////////
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
, geocoder = new google.maps.Geocoder();
function center(imap,iaddress,info_window,zoom){
var map;
map = new google.maps.Map(imap, {
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var address = iaddress;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if(info_window != ''){
var infowindow = new google.maps.InfoWindow({
content: info_window
});
infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500);
}
function initialize(imap,ipanel,start,end,wp,travel_mode_select,opt_wp,printable_panel,DivContainerDistance) {
var directionsDisplay = new google.maps.DirectionsRenderer({draggable: true})
, directionsService = new google.maps.DirectionsService()
, oldDirections = []
, currentDirections;
map = new google.maps.Map(imap, myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(ipanel);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
if (currentDirections) {
oldDirections.push(currentDirections);
}
currentDirections = directionsDisplay.getDirections();
computeTotalDistance(directionsDisplay.directions,DivContainerDistance);
});
var waypts = []
, dest = wp
, request = {
origin: start,
destination: end,
waypoints:waypts,
optimizeWaypoints:opt_wp,
travelMode: google.maps.DirectionsTravelMode[travel_mode_select]
};
for (var i = 0; i < dest.length; i++) {
if (dest[i].value != "") {
waypts.push({
location:dest[i].value,
stopover:true});
}
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
printable_panel.html('')
var route = response.routes[0];
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
printable_panel.append("<b>Route Segment: " + routeSegment + "</b><br />"
+route.legs[i].start_address + " to "+route.legs[i].end_address + "<br />"
+route.legs[i].distance.text + "<br /><br />");
}
}
if ( status != 'OK' ){ alert(status); return false;}
setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500);
});
setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500);
}
function computeTotalDistance(result,DivContainerDistance) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
$(DivContainerDistance).html('Total Distance: '+total + " km")
}
////////////////////////// END GOOGLE MAP API /////////////////

Code works in EDIT view and not SAVED page

My mission: Create a map from list such as :
When editing a SharePoint page (edit mode/view) the map throws no errors in the console. But as I go to view the final saved page the map I get this error in the console:
Event Page.aspx:668 Uncaught TypeError: Cannot read property 'get_current' of undefined
at retrieveListItems (Event Page.aspx:668)
at Event Page.aspx:789
This error points to this line :
var clientContext = new SP.ClientContext.get_current();
It seems like the PAGE is missing some resources that get added when I'm in EDIT MODE.
This code gets the info from the list to pass to the map script.
function retrieveListItems() {
var listName = "North East Events";
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle(listName);
this.website = clientContext.get_web();
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>50</RowLimit></View>');
collListItem = oList.getItems(camlQuery);
clientContext.load(this.website);
clientContext.load(this.collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
var listItemInfo = '';
var locations = [];
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var eventName = oListItem.get_item('Title');
var eventAddress = oListItem.get_item('WorkAddress');
var eventURL = website.get_url() + '/' + 'Lists/North East Reports/DispForm.aspx?ID=' + oListItem.get_id();
var newLocations = [eventName, eventAddress, eventURL];
locations.push(newLocations);
}
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
retrieveListItems();

Trouble getting google map to update location through geocoding a users search

I am trying to have my map update with the users input in the mapSearch box when they hit submit but I'm missing something that's not connecting the submit onclick function with the latlng variable.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng =new google.maps.LatLng(-34.397,150.644);
var mapProp = {
center: latlng,
}
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
};
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
google.maps.event.addDomListener(searchBox, 'places_changed', function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i=0; place=places[i]; i++){
bounds.extend(place.geometry.location);
}
});
$( "#Submit" ).click(function codeAddress(){
var address = document.getElementById("mapsearch").value;
geocoder.geocode( {'mapsearch': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results [0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
I get a javascript error with the posted code: InvalidValueError: unknown property mapsearch on this line: geocoder.geocode( {'mapsearch': address}, (that should be 'address'):
$("#Submit").click(function codeAddress() {
var address = document.getElementById("mapsearch").value;
geocoder.geocode({
'address': address
},
code snippet:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapProp = {
center: latlng,
zoom: 3
}
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
$("#Submit").click(function codeAddress() {
var address = document.getElementById("mapsearch").value;
geocoder.geocode({
'address': address
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="Submit" type="button" value="submit" />
<input id="mapsearch" value="New York, NY" />
<div id="googleMap"></div>

Google Maps DistanceMatrix

I am using Google API, what I need to do is get two different distances in miles. At the moment I have the following:-
var start = arrObjLatLngs[0];
var end = arrObjLatLngs[arrObjLatLngs.length - 1];
var base = new google.maps.LatLng(52.781048888889, -1.2110222222222546);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [base, base],
destinations: [start, end],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
}
}
}
}
What I need to have is two variables; $runinPickup and $runinDestination that contains the distance between 1.) base and start (which will be $runinPickup) and 2.) base and end (which will be $runinDestination)
If I alert distance I get the response:-
13.9 km
5.2 km
13.9 km
5.2 km
Firstly, I'm just wanting to know how I can get the distance of just the distance between base and start as $runinPickup. Secondly, is there a way I can do this so it doesn't include the decimal? So instead of 13.9 km for the first value, it would just be 13.
Then I would need to convert it into miles, which I'm guessing once I can get the value I would do it as follows:
var pickup_distance = parseInt(($fieldPickup / 8) * 5); ?
Any help would be much appreciated! :)
Did you read the documentation? Passing the same address twice in the origins array:
origins: [base, base],
destinations: [start, end],
Is going to give you the same result twice. This should work (not tested), and give you 2 results:
origins: [base],
destinations: [start, end],
To get miles I would suggest setting the unitSystem to IMPERIAL (although I can't find a definition of what that means in the documentation):
unitSystem (optional) — The unit system to use when displaying distance. Accepted values are:
google.maps.UnitSystem.METRIC (default)
google.maps.UnitSystem.IMPERIAL
You can of course convert METRIC units to miles.
Example showing the two values, with distances in IMPERIAL units. Modified from the example in the documentation.
code snippet:
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var base = new google.maps.LatLng(55.930385, -3.118425);
var start = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var end = new google.maps.LatLng(50.087692, 14.421150);
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
var opts = {
center: new google.maps.LatLng(55.53, 9.4),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
calculateDistances();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [base],
destinations: [start, end],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '<table border="1">';
deleteOverlays();
var stringArray = ['$runinPickup', '$runinDestination'];
var htmlString = '<table border="1">';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
htmlString += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>';
outputDiv.innerHTML += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>';
}
}
htmlString += '</table>';
// outputDiv.innerHTML += '</table>';
outputDiv.innerHTML = htmlString;
// alert(htmlString);
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({
'address': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
body {
margin: 20px;
font-family: courier, sans-serif;
font-size: 12px;
}
#map {
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="outputDiv"></div>
<div id="map"></div>

Google Maps Api v3: Info window displaying same information for all the markers on the map

I'm working on this code for a certificate program, I tried to get some help from the instructors but they don't seem familiar with Google Map Apis and the requirement is to display multiple markers from addresses stores in an XML file once a search is performed, i.e I look for John, I get his markers in addition to markers for all of the people whose address is stored and specified in my XML file. So the goal is to be able to display say 5 markers for 5 people and their respective info windows.
I'm able to get all markers to display once a search is performed, I can also get the info windows but the info displayed in all info windows is the same in all markers, it displays the information for the name searched for. You could if you want test with the name Larry, zoom out to other markers and see that they all display the same name. I have no idea why? When I looked at fixes, I found nothing for google API v3 only stuff link a bindEvent for the Api v2. Any help would be highly appreciated, I don't know how to stop the for loop from making all the info windows the same. Thanks.
The code is bellow:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
function load() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
}
function showAddress(theAddress) {
var myaddress = theAddress
if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function showAllAddress(AllAddress) {
var myaddress = AllAddress
if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// Create Info Window
var infowindow = new google.maps.InfoWindow({
content: document.getElementById("theName").innerHTML = fiobj[0].firstChild.data + " " + lastobj[0].firstChild.data+"<br />" + addressobj[0].firstChild.data+"<br />" + phoneobj[0].firstChild.data+"<br />" + emailobj[0].firstChild.data+"<br />"
});
// click event for marker
google.maps.event.addListener(marker, 'click', function() {
// Opening the InfoWindow
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
http.open('get', 'http://idrir.userworld.com/ajax/gmap.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse() {
if(http.readyState == 4){
document.getElementById("theName").innerHTML = ""
document.getElementById("address").innerHTML = ""
document.getElementById("phone").innerHTML = ""
document.getElementById("email").innerHTML = ""
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
for (i=0;i<listings.length;i++) {
firstobj = listings[i].getElementsByTagName("FIRST")
if (firstobj[0].firstChild.data == document.getElementById("first").value){
fiobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
//do not use this code bellow
// document.getElementById("theName").innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
// document.getElementById("address").innerHTML = addressobj[0].firstChild.data
// document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data
// document.getElementById("email").innerHTML = emailobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
showAddress(theAddress)
}
}
//added for loop to add markers
for (i=0;i<listings.length;i++) {
fobj = listings[i].getElementsByTagName("FIRST")
lobj = listings[i].getElementsByTagName("LAST")
aobj = listings[i].getElementsByTagName("ADDRESS")
pobj = listings[i].getElementsByTagName("PHONE")
eobj = listings[i].getElementsByTagName("EMAIL")
AllAddress = aobj[0].firstChild.data
showAllAddress(AllAddress)
}
}
}
</script>
</head>
<body onload="load()">
<form id="search">
<input type="text" id="first" />
<input type="button" value="Search Phonebook" onClick="sndReq()" />
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="mymap" style="width: 500px; height: 300px"></div>
</body>
</html>
I use this and it works... but I'm not a pro: my issue right now
var image = 'http://localhost:3000/images/icons/map/icons/icehockey.png';
var myLatlng_1 = new google.maps.LatLng(53.9515,-113.116);
var contentString_1 = "<b>Provident Place (formerly Redwater Multiplex) Ice Rink</b><br> Redwater, Alberta, Canada<br><b><a href='http://localhost:3000/rink/redwater/provident-place-formerly-redwater-multiplex'>Go To The Rink's Profile</a></b>";
var infowindow_1 = new google.maps.InfoWindow({content: contentString_1});
var marker_1 = new google.maps.Marker({
position: myLatlng_1,
map: map,
icon: image
});
google.maps.event.addListener(marker_1, 'click', function() {
infowindow_1.open(map,marker_1);
});
var myLatlng_2 = new google.maps.LatLng(53.4684,-113.409);
var contentString_2 = "<b>Ridgewood Skating Rink Ice Rink</b><br> Edmonton, Alberta, Canada<br><b><a href='http://localhost:3000/rink/edmonton/ridgewood-skating-rink'>Go To The Rink's Profile</a></b>";
var infowindow_2 = new google.maps.InfoWindow({content: contentString_2});
var marker_2 = new google.maps.Marker({
position: myLatlng_2,
map: map,
icon: image
});

Resources