Develop Reference

Changing Alert message to display in the div on Google Map Geocoding service search

I want to change Alert message(alert('Geocode was not successful for the following reason: ' + status);) to be displayed in the div on Google Map Geocoding service search. What is the best way to do this?
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').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);

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').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
});
// Remove Div if Error message exist on the page
var elem = document.getElementById("lsError");
if (elem) {
elem.parentNode.removeChild(elem);
}
} else {
//alert('Geocode was not successful for the following reason: ' + status);
// Add error message in the div id=lsError
if (!document.getElementById("lsError")) {
var node = document.createElement("div");
node.id = "lsError";
var textnode = document.createTextNode("Please Enter Zipcode or City");
node.appendChild(textnode);
document.getElementById("searchLocation").appendChild(node);
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
with CSS for error message.
<style>
#searchLocation{
position: relative;
}
#lsError{
position: absolute;
bottom: -20px;
background: red;
color: #fff;
padding: 10px;
}
</style>
So I ended up using Javascript to create error message in Div. Seems like it works.

Google Map Boundary of searched Location

I have used the following code to display the marker on the location I have dynamically searched for(code). Now I want to highlight the searched location boundary. (For instance, if I search 'Tokyo', it should mark the boundary of 'Tokyo'(chk the image for reference).
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').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
{
$('#noResults').html("Unsuccessful:" + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Showing multiple markers on google maps

My location finder is showing multiple markers, but i don't want that.
I'm not that good with the Google API, so i hope you can help me.
People need to fill in their address, and then he need to show the location. Without showing multiple markers. (only one)
Here is the JS:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.132633, 5.291266);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function codeAddress() {
var sAddress = document.getElementById("inputTextAddress").value;
document.getElementById("map_canvas").style.removeProperty('display');
geocoder.geocode( { 'address': sAddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Helaas, er is iets fout gegaan. Foutcode: " + status);
}
});
}

If you want to have control of your markers, you need to add them into an array and then remove all of them before adding a new one:
markersArray = []
function codeAddress() {
var sAddress = document.getElementById("inputTextAddress").value;
document.getElementById("map_canvas").style.removeProperty('display');
geocoder.geocode( { 'address': sAddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
RemoveMarkers();
markersArray.push(marker)
} else {
alert("Helaas, er is iets fout gegaan. Foutcode: " + status);
}
});
}
function RemoveMarkers(){
for(i=0;i<markersArray.length;i++){
markersArray[i].remove() // I don't remember exactly the name of the gmaps method
}
}
I haven't tested the code, but this is the idea you need!

Google Maps API v3: How to center on 2 dynamic addresses?

I've spent the last 8 hours trying to do something extremelly easy.
The problem is that I'm not very familiar with JavaScript neither Google Maps API.
All I want to do is to find the center of 2 different locations and zoom accordly.
The 2 address are dinamically, since the user will input the info.
All my searched ended on API v2 or for fixed locations.
Could someone please help me out?
I really appreciate it!
Thanks a lot in advance!!!
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&region=BR"></script>
<script>
var geocoder;
var map;
var query = "<?php echo $endCercompleto; ?>";
var query2 = "<?php echo $endFescompleto; ?>";
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom:8,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
}
function codeAddress() {
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var address2 = query2;
geocoder.geocode( { 'address': address2}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
</script>

This should work. Note that the bounds.extend and the map.fitBounds in each of the geocoder callback routines. You don't know which will complete first.
proof of concept fiddle
<script src="https://maps.googleapis.com/maps/api/js?region=BR"></script>
<script>
var geocoder;
var bounds = new google.maps.LatLngBounds();
var map;
var query = "<?php echo $endCercompleto; ?>";
var query2 = "<?php echo $endFescompleto; ?>";
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom:8,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
map.fitBounds(bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var address2 = query2;
geocoder.geocode( { 'address': address2}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
var marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
map.fitBounds(bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>

placing multiple markers on google map from array

I'm trying to place multiple markers on a map that are provided from an array. Right now only my initial point loads (NYC).
var geocoder;
var map;
var markersArray = [];
//plot initial point using geocode instead of coordinates (works just fine)
function initialize() {
geocoder = new google.maps.Geocoder();
latlang = geocoder.geocode( { 'address': 'New York City'}, function(results, status) { //use latlang to enter city instead of coordinates
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markersArray.push(marker);
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
var myOptions = {
center: latlang, zoom: 5, mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
///////////////////////////////////////////////////////////
//Everything below this line is for attempting to plot the markers
var locationsArray = ['Pittsburgh','Chicago', 'Atlanta'];
function plotMarkers(){
for(var i = 0; i < locationsArray.length; i++){
codeAddresses(locationsArray[i]);
}
}
function codeAddresses(address){
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
//markersArray.push(marker);
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
}

You're not actually calling plotMarkers anywhere in the snippet above! When I added into the end of initialize (after map is defined) it works great! http://jsfiddle.net/T5aKE/
...
map = new google.maps.Map...
plotMarkers();
...