Google Map Integration Custom Marker OR Icon

Google Map Integration with Custom Marker
Google Map Integration with Custom Marker

Google Map Integration Custom Marker OR Icon

I don’t think so, take a look at my demo has no api key but it has functionality with custom marker and custom info window. It drives me crazy when things takes less than an hour to built this code.

Have you ever though keeping Google map with fullscreen toggle option? Cool ahhh!… just check out my example.

[symple_toggle title=”Between <head></head> Section”]

<script src=”js/FullScreenControl.js” type=”text/javascript”></script> <!– Fullscreen JS –>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.show_hide’).showHide({
speed: 1000,  // speed you want the toggle to happen
easing: ”,  // the animation effect you want. Remove this if you dont want an effect
changeText: 1, // if you dont want the button text to change, set this to 0
showText: ‘View’,// the button text to show when a div is closed
hideText: ‘Close’ // the button text to show when a div is open
});
});
</script>

[/symple_toggle]

[symple_toggle title=”Between <body> tag”]

<div id=”map_canvas”> <!– Map will display –>
<div id=”map”> <!– Fullscreen Loading & Fullscreen Buttons area –>
<span style=”color:Gray;”>Loading map…</span>              </div>
<!– Fullscreen Loading & Fullscreen Buttons area Ends –>
</div><!– Map Ends display –>

<!– Google Map JS –>
<script src=”http://maps.google.com/maps/api/js?sensor=false” type=”text/javascript”></script>
<script type=”text/javascript”>
/* <![CDATA[ */
window.onload = function() {
var settings = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15,
center: new google.maps.LatLng(40.715618, -74.011133)
};
var map = new google.maps.Map(document.getElementById(“map”), settings);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));
var image = ‘images/marker.png’;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.715618, -74.011133),
map: map,
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: ‘<div class=info><b>Location Title</b><br><img src=”images/barber/1.jpg”><br> Location Descrption – You can add class and define it to CSS<br><br> <b>City:</b> New York’
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
});
}
/* ]]> */
</script>

[/symple_toggle]

[symple_toggle title=”The CSS”]

* Map CSS */

#canvas_holder{
position: absolute;
top: 0px;
left: 0px;
width:100%;
}
#map_canvas{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
#map
{
position: relative;
width: 100%;
height:100%;
}
.info
{
width: 370px;
height: 200px;
}
.info img
{
width: 150px;
height: 100px;
}

[/symple_toggle]

The example shown in my demo can be used as fullpage background map as well. Google Map Integration Custom Marker

 Subscribe to Newsletter to receive Updates about the Latest Blog Content

demo-button download-button

Summary
Google Map Integration with Custom Marker
Article Name
Google Map Integration with Custom Marker
Description
Google Map, Google Map & Google Map..... Its everywhere now. Now days google map integration in contact page is mandatory. I have seen people who were writing big blogs and explaining the google map and they force to create google map API key to generate custom variables & custom functionality.
Author

Leave a Reply

Your email address will not be published. Required fields are marked *